Как устранить ошибку слишком большого количества повторных рендеров в ReactJS?

Опубликовано: 7 Августа, 2021

«Слишком много повторных отрисовок» - это ошибка React, которая возникает после достижения бесконечного цикла отрисовки, обычно вызванная кодом, который в хуке useEffect или в основном теле самого компонента безоговорочно вызывает установщики состояния.

Когда React решает повторно отрендерить компонент?

  • Первый рендеринг будет запущен после жизненного цикла componentWillMount.
  • После жизненного цикла React ComponentWillUpdate он активируется.
  • После монтирования компонента React он будет прослушивать любые измененные свойства или состояние React.
  • По умолчанию он повторно визуализирует весь компонент React и его дочерние компоненты, когда обнаруживает, что что-то изменилось.

Вот несколько советов, как избежать слишком большого количества ошибок повторного рендеринга в React:

  • Не меняйте состояние в основной части компонента.
  • Используйте крючок useEffect очень осторожно. Второй параметр useEffect - это массив состояний, основанный на вызове useEffect. Так что не обновляйте эти состояния в useEffect, иначе компонент будет повторно визуализироваться снова и снова.
  • Используйте React shouldComponentUpdate: React shouldComponentUpdate - это метод оптимизации производительности, который сообщает React прекратить повторный рендеринг компонента, даже если он мог изменить состояние или значения свойств. Используйте этот подход только в том случае, если деталь остается неизменной или чистой во время использования. Ожидается, что вы вернете логическое значение с помощью метода React shouldComponentUpdate. Верните true, если требуется повторный рендеринг, или false, чтобы избежать повторного рендеринга.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Имя файла - App.js: Ниже приведен пример использования React shouldComponentUpdate. В этом коде я построил 2 компонента React. Один является частью приветствия, а другой - компонентом приложения. Во время жизненного цикла рендеринга каждый компонент React представляет собой консоль, регистрирующую сообщение.

Javascript




import React from "react" ;
class Greeting extends React.Component {
render() {
console.log( "Greeting - Render lifecycle" );
return <h1>Geeksforgeeks</h1>;
}
}
class App extends React.Component {
render() {
console.log( "App - Render lifecycle" );
return <Greeting />;
}
}
export App; default

Выход:

Имя файла - App.js: Затем в жизненном цикле componentDidMount React я добавлю состояние React и обновлю значение состояния.

Javascript




import React from "react" ;
class Greeting extends React.Component {
render() {
console.log( "Greeting - Render lifecycle" );
return <h1>Geeksforgeeks</h1>;
}
}
class App extends React.Component {
state = {
greeted: false ,
};
componentDidMount() {
this .setState({ greeted: true });
}
render() {
console.log( "App - Render lifecycle" );
return <Greeting />;
}
}
export App; default

Выходные данные: в выходных данных можно увидеть, что жизненный цикл рендеринга запускался более одного раза как в приложении, так и в компонентах приветствия. Это связано с тем, что компонент приложения React был повторно отрисован после обновления значений состояния, а его дочерние компоненты также были повторно отрисованы. Мы должны предположить, что часть приветствия не изменилась и никогда не изменится.

Имя файла - App.js: используйте ловушку shouldComponentUpdate, когда ясно, что всегда создаваемый нами компонент будет статическим.

Javascript




import React from "react" ;
class Greeting extends React.Component {
shouldComponentUpdate() {
console.log( "Greeting - shouldComponentUpdate lifecycle" );
return false ;
}
render() {
console.log( "Greeting - Render lifecycle" );
return <h1>Geeksforgeeks</h1>;
}
}
class App extends React.Component {
state = {
greeted: false ,
};
componentDidMount() {
this .setState({ greeted: true });
}
render() {
console.log( "App - Render lifecycle" );
return <Greeting />;
}
}
export App; default

Результат: вы можете видеть, что приложение и компонент приветствия прошли цикл жизненного цикла отрисовки. После изменения значений состояния компонент приложения снова прошел жизненный цикл отрисовки. Но компонент приветствия не заносил в консоль сообщение о жизненном цикле визуализации.