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> только в критически важных участках или для сложных компонентов, чтобы максимально эффективно использовать его возможности.

Полезные материалы

1. Строгий режим – React — официальная документация React о строгом режиме.
2. React.StrictMode в сочетании с useState вызывает двойную отрисовку компонента · Issue #15074 · facebook/react · GitHub — актуальное обсуждение на GitHub о поведении отрисовки в строгом режиме.
3. Как обновиться до React 18 – React — детальное руководство по обновлению до последней версии React и его взаимодействию со строгим режимом.
4. Medium — подробная статья о строгом режиме в React.
5. Введение в Concurrent Mode (Экспериментальный) – React — разбор связи текущего режима с особенностями строгого режима.