How to fix the "cannot update a component while rendering a different component" error in React
A quick guide to how I solved a confusing React error
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 }) {
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])
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025