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.")

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

What does useEffect do?

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.

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

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

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.")

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

What does useEffect do?

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.

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.")

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

What does useEffect do?

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.

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