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 July 23, 2024
Was this helpful?