Comment corriger l'erreur "Impossible de mettre à jour un composant lors du rendu d'un composant différent" dans React

Un guide rapide sur la façon dont j'ai résolu une erreur React déroutante

En travaillant sur une application React / Next.js, j'ai eu cette erreur:

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: