Как исправить ошибку “невозможно обновить компонент при отображении другого компонента” в React

Во время работы над реакцией/Next.js приложение, в котором я получил эту ошибку:

Cannot update a component (`App`) while rendering a different component

Я немного исследовал, как решить эту проблему, но в найденном мной материале было много путаницы.

Вот что я делал: у меня было централизованное управление состоянием в компоненте приложения:

function MyApp({ Component, pageProps }) {
  const [lessonsRead, setLessonsRead] = useState()

  return (
    
  )
}

и в Next.js компонент страницы, который я вызвал набор прочитанных уроков для заполнения этого состояния данными на основе результата вызова SWR (выборки):

if (courseData && courseData.lessonsRead) {
  setLessonsRead(courseData.lessonsRead)
}

Я делал это прямо внутри компонента.

Чтобы решить эту проблему, мне пришлось обернуть этот код в эффект использования, чтобы запускать его только при изменении данных, а не при обновлении каждого компонента.:

useEffect(() => {
  if (courseData && courseData.lessonsRead) {
    setLessonsRead(courseData.lessonsRead)
  }
}, [courseData])

Оригинал: “https://flaviocopes.com/react-update-while-rendering-different-component/”