Warning: Cannot update a component X while rendering a different Y component To locate the bad setState() call inside Y,

The problem is when one component queues an update in another component, while the first component is rendering. (Bug: too hard to fix "Cannot update a component from inside the function body of a different component.")

Problem:

While ShowProducts is rendered it also dispatching an action that causing to queue an update in the Cart.

Fix:

Move the dispatch inside useEffect.

Explanation:

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. What does useEffect do?

The following is sandbox pen to demonstrate the bug and the fix. (Open the console in the right bottom corner to see the warning, you can comment out the dispatch in the render and see the warning disappears)

Note that you are using useEffect async and it is supposed to be sync only. Read here

I had the same problem and the root of my problem was a little different, and it caused the same error.

I was trying to update the state of parent component (through callback props), in the body of updater callback of useState's setState. like this:

... const [state, setState] = useState(); useState((prev) => { const newState = someOperationToGenerateNewStateFromTheOldOne(prev); updateStateOfParentComponent();//this call caused the issue because as the error says causes update of parent component during the state change(render) of this component return newState; }) 

As a fix you can use useEffect like this:

... const [state, setState] = useState(); useEffect(() => { updateStateOfParentComponent(); }, [state]) useState((prev) => { return someOperationToGenerateNewStateFromTheOldOne(prev); }) 

In my case, the solution that worked was using setTimeOut for the nested function. As it turns out the error was causing as it tried to render both the component at the same time.

Problem code:

 const handleClick = (e) => { setList((prevList) => { const updatedList = [...prevList, e.target.value] setFieldValue(name, updatedList) //this line caused error return updatedList }) } 

Solution code:

 const handleClick = (e) => { setList((prevList) => { const updatedList = [...prevList, e.target.value] setTimeout(() => { setFieldValue(name, updatedList) }, 0) return updatedList }) }