How to fix the "cannot update a component while rendering a different component" error in React
New Course Coming Soon:
Get Really Good at Git
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])
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X