Skip to content

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])
→ Get my React Beginner's Handbook

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook

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

Bootcamp 2025

Join the waiting list