React.JS: Too many re-renders
Причины возникновения и способы устранения
Функциональные компоненты React(Function component) работают в React так же, как функции в обычном javaScript. Т.е. что бы отрисовать компонент, код компонента(функции) читается и выполняется с начала({) и до конца(}) как обычная функция javaScript.
Обновление состояния компонента вне функции данного компонента
Для примера, давайте посмотрим на этот функциональный компонент:
let i = 0; // Объявлена за пределами функции
export default function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const addNote = (item) => {
const copy = Object.assign([], notes);
copy.push(item); // так правильно
setNotes(copy);
}
console.log(++i)
return <div>
{notes.map((note, index) => {
return <p key={index}>{note}</p>;
})}
<button onClick={() => addNote(notes.length + 1)}>add</button>
</div>;
}
Как мы видим в консоли разработчика, что каждое действие(установка компонентов в DOM и нажатие на кнопку) сопровождается вызовом функции и выводом в консоль.
Это означает, что все что описано вне функций, внутри функционального компонента, вызывается при событии обновления состояния компонента.
Теперь возьмем ваш код и подумаем, что же будет происходить, если вызывать изменение состояния компонента вне функции.
Вот ваш пример, который выдает ошибку too many re-renders:
let i = 0;
export default function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const addNote = (item) => {
const copy = Object.assign([], notes);
copy.push(item); // так правильно
setNotes(copy);
}
// Изменяем состояние компонента.
setNotes(() => {
const c = notes;
c.push(++i);
return c;
});
console.log(i, notes);
return <div>
{notes.map((note, index) => {
return <p key={index}>{note}</p>;
})}
<button onClick={() => addNote(notes.length + 1)}>add</button>
</div>;
}
Давайте разберем, что происходит в этой функции! Идем по порядку, читаем функцию и выполняем...
Создается хранилище, создается функция addNote
. Вызывается setNotes
(асинхронная функция). Далее вывод в консоль и рендер.
Срабатывает setNotes
вызванный ранее и меняет состояние. Запускается рендер, бежим по коду компонента -> хранилище есть -> функция есть -> вызываем setNotes
-> вывод в консоль и рендер.
Срабатывает setNotes
вызванный ранее и меняет состояние. Запускается рендер, бежим по коду компонента -> хранилище есть -> функция есть -> вызываем setNotes
-> вывод в консоль и рендер.
Срабатывает setNotes
вызванный ранее и меняет состояние. Запускается рендер, бежим по коду компонента -> хранилище есть -> функция есть -> вызываем setNotes
-> вывод в консоль и рендер.
Срабатывает setNotes
вызванный ранее и меняет состояние. Запускается рендер, бежим по коду компонента -> хранилище есть -> функция есть -> вызываем setNotes
-> вывод в консоль и рендер.
Т.к. это не прекратится никогда, вы получаете логичную ошибку React: Too many re-renders.
Неявный вызов обновления состояния компонента из события элемента
Давайте изменим наш код. С виду кажется, что очень даже работоспособный код, однако он тоже приведет к ошибке React: Too many re-renders.
let i = 0;
export default function App() {
const [numClick, setNumClick] = useState(0);
console.log(i);
return <div>
{numClick}
<button onClick={setNotes(c => c++)}>Add click</button>
</div>;
}
Выполнение обновления состояния компонента в событиях элемента должно быть обёрнуто в функцию, иначе javaScript воспринимает setNotes(c => c++)
как вызов обычной функции javaScript func()
.
Так как setNotes действительно является функцией, то происходит ее вызов в момент рендера компонента. А далее по кругу.
useEffect без массива зависимостей
useEffect(() => {
setNotes(n => ++n);
});
Такое может быть расценено браузером как вызов фукнции -> someFunctin()
что приведент к зацикливанию и ошибке.
Циклическая зависимость через useEffect
В большом количестве кода, с большим количеством переменных состояния компонента можно допустить ошибку, когда через хук useEffect состояние компонента будет бесконечно и бесконтрольно обновляться.
В функциональных компонентах, каждое изменение состояния происходит последовательно, друг за другом, по мере вызова обновления, хотя и асинхронно, т.е. порядок не гарантирован.
Рассмотрим данный код, как пример, в котором как раз реализована циклическая зависимость одной переменной состояния от другой.
let i = 0;
export default function App() {
const [numClick, setNumClick] = useState(2);
const [res, setRes] = useState(4)
console.log(i);
useEffect(() => {
setRes(numClick ** 2);
}, [numClick]);
useEffect(() => {
setNumClick(e => ++e);
}, [res]);
return <div>
{numClick}
<button onClick={() => setNumClick(e => ++e)}>Возвести в квадрат</button>
</div>;
}
Как видно из примера, при нажатии на кнопку, вызывается обновление состояния переменной numClick.
Когда состояние изменится, запустится хук useEffect()
с зависимостью numClick.
Когда обновится состояние res, запустится хук useEffect()
с зависимостью res, который обновит состояние переменной numClick.
Когда состояние изменится, запустится хук useEffect()
с зависимостью numClick.
Когда обновится состояние res, запустится хук useEffect()
с зависимостью res, который обновит состояние переменной numClick.
И так далее до получения ошибки React: Too many re-renders.
Я надеюсь, с этим примером вам станет более понятно, как работают функциональные компоненты React и каких действий с обновление состояния компонента следует избегать для предотвращения появления ошибки React: Too many re-renders.