Strict Mode в React: рендер компонента дважды, решение
Быстрый ответ
Двойная отрисовка, о которой вы говорите, связана со строгим режимом (Strict Mode) React. Данная функция служит для выявления потенциальных проблем на этапе разработки и включает механизм двойной отрисовки компонентов. Чтобы отключить двойную отрисовку, достаточно убрать <React.StrictMode>
из файла index.js
:
// Рендеринг компонента теперь будет происходить один раз 🍺
ReactDOM.render(<App />, document.getElementById('root'));
Однако, следует отметить, что данный эффект проявляется только в режиме разработки; в производственной среде React выполняет каждую отрисовку ровно один раз.
Осмысливаем предназначение строгого режима
Строгий режим — это не просто источник проблем. Это ценный инструмент разработчика, который позволяет заранее выявить возможные проблемы в приложении. Двойная отрисовка компонентов также помогает прояснить ситуацию с побочными эффектами.
Точка пересечения строгого режима и ваших потребностей
Прежде чем убрать <React.StrictMode>
из вашего проекта, задайте себе следующие вопросы:
- Насколько хорошо вы осведомлены о побочных эффектах ваших компонентов?
- Уверены ли вы, что при разработке не было допущено ошибок?
Если есть сомнения, лучше сохранить строгий режим в качестве защиты качества вашего кода.
Это не выбор между строгим режимом и его отключением
Есть ситуации, когда можно обойтись без строгого режима:
- Вы хорошо осведомлены о потенциальных ограничениях.
- Ваш код уже стабилизирован и не подвержен активной разработке.
- Команда довольна текущим состоянием и производительностью приложения.
Визуализация
Представьте себе посещение парка аттракционов с билетом, предоставляющим право на два прохода подряд:
🎢 Поездка на "React-аттракционе" со строгим режимом
Первый круг: Пробный заезд
🎟️ ➡️ 🔧🔍 – React проверяет всё ли в порядке перед основным действием.
Второй круг: Настоящее приключение
🎟️ ➡️ 😃🎉 – Веселье начинается, когда убедились в надёжности аттракциона!
Ключевой момент: Строгий режим подобен пробному заезду, обеспечивающемому безопасное веселье, а не излишним повторам.
🕵️🎢: Двойная отрисовка = Двойная проверка (🔧✅ ➡️ 😃✅)
Когда двойная отрисовка может вызывать беспокойство
Двойная отрисовка в строгом режиме используется только во время разработки и может ввести в заблуждение.
Влияние на производительность
Двойной контроль в строгом режиме может замедлить приложение и вызвать повторение тяжелых вычислений.
Ложные сигналы тревоги
Вследствие двойной отрисовки разработчики могут ошибочно интерпретировать работу хуков и жизненного цикла компонентов.
Тестирование
Для правильного тестирования придется учесть двойную отрисовку, чтобы исключить ошибочные результаты.
Стратегии адаптации к строгому режиму и его особенностям
Оценив все плюсы и минусы строгого режима, подстройте вашу среду разработки в соответствии с принятым решением.
Использование инструментов для разработчиков React
Активируйте опцию "Скрыть логи второй отрисовки в строгом режиме" в React Developer Tools, чтобы не захламлять консоль ненужными сообщениями.
Отключение строгого режима в Next.js
В случае с приложениями Next.js достаточно установить reactStrictMode: false
в next.config.js
, чтобы временно отключить строгий режим.
Частичное использование строгого режима
Применяйте <React.StrictMode>
только в критически важных участках или для сложных компонентов, чтобы максимально эффективно использовать его возможности.
Полезные материалы
- Строгий режим – React — официальная документация React о строгом режиме.
- React.StrictMode в сочетании с useState вызывает двойную отрисовку компонента · Issue #15074 · facebook/react · GitHub — актуальное обсуждение на GitHub о поведении отрисовки в строгом режиме.
- Как обновиться до React 18 – React — детальное руководство по обновлению до последней версии React и его взаимодействию со строгим режимом.
- Medium — подробная статья о строгом режиме в React.
- Введение в Concurrent Mode (Экспериментальный) – React — разбор связи текущего режима с особенностями строгого режима.