Cómo corregir el error "no se puede actualizar un componente mientras se renderiza un componente diferente" en React

Una guía rápida sobre cómo resolví un confuso error de React

Mientras trabajaba en una aplicación React / Next.js recibí este 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:

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:

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:

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

Download my free React Handbook


More react tutorials: