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 
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:

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:

• javascript
• reactjs
• redux
• react-redux

• Please provide Cart , ShowProducts components too – Zohar Chiprut Commented Jan 2, 2022 at 14:44

3 Answers 3

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