React 16.13 throws a warning when "nesting" useInjectReducer calls
After upgrading to React 16.13, we started getting this warning in many places:
More info about it in the 16.13 announcement post.
Here's how it happens in our case:
useInjectReduceris called, the warning appears.
This happens because calling
store.replaceReducer synchronously during the render of the
From what I understand, we're not technically updating the state of a component during the render of another component but we are updating the
ReactReduxContext - which contains the
store and is also consumed by
useInjectReducer - so that must be enough to trigger the warning.
The suggestion by the React team is to "wrap the
setState call into
Up until September of last year, this is exactly how
useInjectReducer worked: injection happened inside an effect. However, doing the injection inside an effect caused a different issue: we couldn't guarantee that the reducer or saga was always injected before a relevant action is dispatched. (Discussed in RBP here.)
Does anyone have any thoughts or suggestions regarding how we could fix this?
@joejordan this pattern is unfortunately not possible anymore without getting the warning here.
The reason this used to work was because the reducer was being injected during the render. Injecting a reducer is usually a side-effect, which is what react is warning about here.
You would have to re-structure the code in this case so
useSelector is called within a child of
FeatureAppLoader. You could also try the new
createManager api which would not have this problem.