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.
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.
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?
< of >
Want to be notified when I add a new explainer?
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.