REACT_STABLE_CONTEXT_PROVIDER_VALUE
Prevent non-stable values from being used in React Context providers that could cause unnecessary re-renders.Table of Contents
Conformance is available on Enterprise plans
When non-stable values (i.e. object identities) are used as the value
prop for Context.Provider
,
React will trigger cascading updates to all components that use this context value on each
render, causing needless re-renders (affecting application performance) or causing
unintended consequences that may negatively affect the user-experience.
Examples of incorrect code for this rule:
return <SomeContext.Provider value={{ foo: 'bar' }}>...</SomeContext.Provider>;
Examples of correct code for this rule:
const foo = useMemo(() => ({ foo: 'bar' }), []);
return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;
One way to fix this issue may be to wrap the value in a useMemo()
. If the value is a function
then useCallback()
can be used as well. See the above examples for a reference on how you might
fix this by wrapping with useMemo
.
Last updated on September 7, 2024
Was this helpful?