How to fetch data in React with render performance in mind?

⇦ Home / Jargon Free Introductions

How to fetch data in React with render performance in mind?

What kind of re-renders are we trying to optimize here?

Our React views are a collection of components that handle various pieces of data.

When multiple components use the same data, such data has to be handled in a common component.

Handling the data shared between the components in a common component = lifting the state up.

Run this code snippet on CodeSandBox

Lifting the state up can lead to unnecessary re-rendering of some components.

So, how do we fetch data & handle mutations to prevent this sort of re-rendering?

If we could fetch data & manage state within certain components, we could avoid re-rendering other components.

With libraries like react-query or swr, we can overcome issues wrt. fetching data & handling state within components

Run this code snippet on CodeSandBox

Colocating data fetching & mutations with components also makes our code easier to maintain.

What are the gotchas wrt. fetching data and handling mutations within the components?

Fetching data within components can cause request waterfalls. This, in-turn, can delay rendering of components.

Request waterfalls can be avoided by prefetching the data at route level. But building maintainable mechanisms to do can be complicated

Want to be notified via email when a new explainer is added?

Submit

< of >

Want to be notified when I add a new explainer?

Submit

I create about one or two of these every month (whenever I find time between my webdev work) & you can unsubscribe at any time. 💨

Copyright (c) 2017-2024 Tezify All Rights Reserved. Created in India. GSTIN : 24BBQPS3732P1ZW.