REACT_STABLE_CONTEXT_PROVIDER_VALUE
Last updated March 4, 2025
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.
Was this helpful?