Понимание двойной рендеринга в useState

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

Роль строгого режима

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

Двойной вызов функций в строгом режиме

В документации React прямо указано, что строгий режим намеренно «двойной вызов» определенных функций, включая функции обновления состояния, передаваемые в setState и useState. Это означает, что всякий раз, когда вы вызываете setNumber в своем коде, он вызывается дважды.

Последствия двойного вызова

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

Заключение

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