While working on a React / Next.js 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:

function MyApp({ Component, pageProps }) {

return (
<Component
{...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) {
}


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(() => {