When using Context
<SomeContext.Provider value={{something: 123}}>
...
</SomeContext.Provider>
I get the following error from ESLint: The object passed as the value prop to the Context provider (at line 129) changes every render. To fix this consider wrapping it in a useMemo hook.
This rule seems slightly aggressive to me as my understanding was that Context works in the same way as other re-renders (if the component that is recalculating the value
prop is being re-rendered anyways, it’s going to re-render the entire subtree regardless, unless memo()
is used somewhere).
Is my understanding correct that this really doesn’t matter unless I have a Consumer component somewhere down the tree that is memo()
d? And if that’s the case, why doesn’t ESLint just tell us to memo()
literally every object that’s reconstructed on renders to be consistent?
1