React rendering state
React, Render · Jun 12, 2021
- React rendering basics
- React rendering optimization
- React rendering state (this blog post)
React's Context API provides a way to pass data through the component tree without using
props, but should not be used for state management as it requires manual updating. Any component inside a context's
Provider can access the data in the context instance using a
Consumer component or, for function components only, the
When a new reference is passed to a context
Provider it will cause any connected components to update. React will look for any components consuming the context in the component tree and update them to reflect the change in the context's value. Passing a new object to a context
Provider is essentially a new reference, as the context holds a single value (in this case an object).
By default, any update to a parent component that renders a context
Provider will cause all of the child components to re-render regardless of changes in the context, due to React's rendering process. To avoid re-rendering child components when a parent changes, memoization can be used, which will cause React to skip the whole subtree of a skipped component.
When the context is updated, React additionally checks for components consuming the context down the subtree. This allows context-consuming components under a memoized parent that does not re-render to consume the updated context and render as necessary. After a context-consuming component re-renders, React will keep on recursively rendering its child components as usual.
Oftentimes, it's a good idea to memoize the component immediately under a context
Provider. That way updates to the parent component will not cause a re-render for the whole subtree, but only the components that consume the context.
While this most likely means that fewer components will have to re-render compared to using a context, React-Redux always executes its
useSelector functions for every connected component in the tree whenever the store state is updated. These calculations are usually less expensive than React's rendering, but if there are costly calculations performed or new references returned when they shouldn't, it might become problematic.
React-Redux provides two ways of connecting to its store, performing the necessary work and returning the combined
connect(any component): Higher-order component (HOC) that wraps any given component
useSelector(function components): Hook called inside function components
connect acts a lot like memoizing a React component (i.e. using
React.memo()), updating the wrapped component only when the combined
props have changed. This means that passing new references from the parent or the passed functions will still cause a re-render. Components wrapped with
connect usually read smaller pieces of data from the store state, are less likely to re-render due to that and usually affect fewer components down their tree.
On the other hand,
useSelector has no way of stopping a component from rendering when its parent component renders. When exclusively using
useSelector, larger parts of the component tree will re-render due to Redux store updates than they would with
connect, since there aren't other components using
connect to prevent them from doing so. You can use
React.memo() as necessary, to optimize this behavior by preventing unnecessary re-rendering.
Written by Angelos Chalaris
If you want to keep in touch, follow me on GitHub or Twitter.