# Fix 'cannot update a component while rendering' in React

> Learn how to fix the cannot update a component while rendering a different component error in React by moving your setState call inside a useEffect hook.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-10-23 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-update-while-rendering-different-component/

While working on a [React](https://flaviocopes.com/react/) / [Next.js](https://flaviocopes.com/nextjs/) application I got this error:

```
Cannot update a component (`App`) while rendering a different component
```

I researched a bit how to solve this problem, but there was a lot of confusion in the material I found.

Here is what I was doing: I had a centralized state managed in the App component:

```js
function MyApp({ Component, pageProps }) {
  const [lessonsRead, setLessonsRead] = useState()

  return (
    <Component
      lessonsRead={lessonsRead}
      setLessonsRead={setLessonsRead}
      {...pageProps}
    />
  )
}
```

and in a Next.js page component I called `setLessonsRead` to populate this state with data, based on the result of a SWR (fetch) call:

```js
if (courseData && courseData.lessonsRead) {
  setLessonsRead(courseData.lessonsRead)
}
```

I was doing this right inside the component.

To solve this problem I had to wrap this code in useEffect, to only run it when the data changed and not on every component props update:

```js
useEffect(() => {
  if (courseData && courseData.lessonsRead) {
    setLessonsRead(courseData.lessonsRead)
  }
}, [courseData])
```