React 18 — тонкости использованияЭффект

Узнайте о сложном поведении хука useEffect при использовании строгого режима в React 18.

React 18 вышел уже пару недель. Хотя он приносит несколько улучшений, он вводит довольно странное поведение в один из наиболее часто используемых хуков. Хотите знать, что это? Вот так…

useEffect(), который должен запускаться только при начальном монтировании, запускается дважды!

Да, вы не ослышались! Если вы используете React 18 в строгом режиме, следующий фрагмент кода:

Будет производить такой вывод:

Hello there!
Hello there!

Как указано в документации , React 18 вводит новую проверку только для разработки в строгом режиме. Эта новая проверка автоматически размонтирует и повторно монтирует каждый компонент всякий раз, когда компонент монтируется в первый раз, восстанавливая предыдущее состояние при втором монтировании.

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

Итак, каждый компонент монтируется, затем размонтируется и, наконец, снова монтируется?

Да, так это работает сейчас. Если бы мы использовали useEffect()хук следующим образом:

После обновления страницы вывод будет

Mounting...
Unmounting...
Mounting...

Резюме

React 18 представляет новую проверку только для разработки в строгом режиме. Эта проверка автоматически размонтирует и повторно монтирует компонент, в результате чего хук useEffect срабатывает дважды при первоначальном монтировании.