"Cannot update a component while rendering a different component" warning caused by `useSelector`

using react 16.13.1 and react-redux 7.2.1 I get this new “cannot update a component while rendering a different component” react warning in the following scenario:

1. a parent component pulls from some redux slice with useSelector
2. a child of that parent also pulls from the same redux slice with useSelector (can be the same or a different value of that slice)
3. the parent dispatches an action that updates that redux slice

=> 💥 I get the warning on the console “Warning: Cannot update a component (SomeChild) while rendering a different component (SomeParent). To locate the bad setState() call inside SomeParent, follow the stack trace…”

if my implementation is an antipattern, what’s the expected pattern? that parents should be aware if any of their children want to access the same redux slice as them, and if so pull the value for them and drill it down to the appropriate child?

[markerikson]

The issue only occurs if you are actually queuing state updates while rendering, which is not allowed in React in general.

For background on the specific React behavior here, see https://github.com/facebook/react/issues/18178 .

I’d recommend looking at SomeChild’s render logic, and find a place where you’re dispatching an action outside of a click handler or a useEffect, directly in the body of the render logic. Changing that code to not dispatch while rendering should fix the issue.

[markerikson]

@Bharateshwar as per above: the issue is not useSelector - the issue is triggering state updates while rendering, such as dispatching a Redux action.