Handling Data at Scale for React Developers – Tejas Kumar, React Summit 2022

Learn how to handle data at scale in React applications. Explore techniques like render-as-you-fetch, Suspense for Data Fetching, and using libraries. Optimize your data model, use indexes, and monitor performance for a scalable React app.

Key takeaways
  • Fetch then render: This is the most common way to fetch data in React. You render your component, then you fetch the data and update the state. This can lead to a flash of unstyled content while the data is loading.
  • Render as you fetch: This is a new feature in React 18 that allows you to start rendering a component before the data is fully loaded. This can improve the user experience by avoiding a flash of unstyled content.
  • Suspense for Data Fetching: This is an RFC that proposes a new way to handle data fetching in React. It allows you to declaratively specify which parts of your UI depend on certain data, and React will automatically suspend rendering of those parts until the data is available.
  • Use a library: There are many libraries available that can help you manage data at scale in React. These libraries can provide features such as caching, pagination, and data validation.
  • Consider your data model: The way you structure your data can have a big impact on performance. Consider using a normalized data model to reduce the number of database queries you need to make.
  • Use indexes: Indexes can help your database find the data you need more quickly. Make sure to create indexes on the columns that you frequently query.
  • Monitor your performance: It’s important to monitor your application’s performance so that you can identify any bottlenecks. There are many tools available that can help you do this, such as the React Profiler.