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

Question

I have a Cart component with react-redux and I have a showProducts component that fetches the products from an API (using await- async) inside a useEffect, and then I use useState to set some of the states and use dispatch to update the redux state as well. I keep getting this warning:

Warning: Cannot update a component (`Cart`) while rendering a different component (`ShowProducts`). To locate the bad setState() call inside `ShowProducts`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
ShowProducts@http://localhost:3000/static/js/main.chunk.js:3099:73

I have a Store page and in my store page I have:

 <Grid item xs container >
    <ShowProducts />
 </Grid>
 <Grid item xs container direction="column">
    <Cart />
 </Grid>

and in my show products:

useEffect(async () => {
    await getData();
  }, []);
  .
  dispatch(setShippingCosts);
  dispatch(setCompanyNam);
  .
  .
  .
  async function getData() {
    fetch(
      `url`
    )
      .then((res) => res.json())
      .then((data) => {
       .
       .
       .
        setProducts(...);
        setShippingCost(...);
       .

      })
      .catch((error) => {
        setError(error);
      });
  }

and in my cart, I am using the shipping cost that comes from the show products component. I am not sure how to fix this warning, I have been searching and I haven't found a solution yet. how serious is this warning, and I am not sure why I am getting it.

full warning:

Please provide Cart , ShowProducts components too – Zohar Chiprut Jan 02 '22 at 14:44 — Zohar Chiprut, Jan 02 '22 at 14:44

Zohar Chiprut · Answer 1 · 2022-01-12T16:35:00.580

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

score 6 · Answer 2 · answered Nov 17 '22 at 17:19

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);
})

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

2 Answers2

Linked