> Что такое strict mode в React и зачем он нужен (React)

Короткий ответ

Strict mode - это инструмент для выявления потенциальных проблем в React-приложении на этапе разработки. Он активируется обёрткой компонентов в <React.StrictMode> и не влияет на production-сборку. Strict mode помогает обнаружить небезопасные lifecycle-методы, предупреждает об использовании устаревшего API (например, findDOMNode), проверяет побочные эффекты и выявляет проблемы с ключами в списках. Он также дважды вызывает рендер и эффекты для обнаружения ошибок.

Подробное объяснение

Strict mode - это компонент-обёртка, который включает дополнительные проверки и предупреждения только в development-режиме. Он не рендерит видимый UI и не влияет на поведение приложения в production. Основные возможности:

• Обнаружение небезопасных lifecycle-методов: например, componentWillMount, componentWillReceiveProps, componentWillUpdate - они помечены как устаревшие и могут вызывать баги в async-рендеринге.
• Предупреждение об устаревшем API: findDOMNode, String Refs и Context старого образца.
• Проверка побочных эффектов: Strict mode дважды вызывает функции рендера, setState updater и эффекты (useEffect, useLayoutEffect), чтобы выявить ошибки, связанные с нечистыми функциями.
• Обнаружение проблем с ключами: предупреждает, если в списках используются неуникальные или нестабильные ключи.

Strict mode работает только с функциональными компонентами и классовыми, которые используют современные API. Он не проверяет сторонние библиотеки, если они не используют React API напрямую.

На практике

Strict mode применяется на уровне корневого компонента или отдельных частей приложения. Обычно его оборачивают вокруг всего приложения в файле index.js или App.js. Это безопасно, так как он не изменяет DOM и не влияет на поведение в production.

Когда использовать: всегда в development-среде, особенно при миграции с классовых компонентов на функциональные или при использовании устаревших API.

Когда не использовать: в production-сборке (он автоматически отключается). Также не стоит оборачивать им компоненты, которые зависят от сторонних библиотек с нечистыми эффектами, если это вызывает ложные срабатывания.

Пример кода

JSX
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

В этом примере Strict mode оборачивает всё приложение. В development-режиме React будет дважды вызывать рендер и эффекты, чтобы проверить их чистоту. В production-сборке двойной вызов не происходит.

Как отвечать на собеседовании

Начни с краткого определения: "Strict mode - это инструмент для выявления проблем на этапе разработки". Затем перечисли основные возможности: проверка устаревших API, двойной вызов эффектов для обнаружения побочных эффектов, предупреждения о ключах. Упомяни, что он работает только в development и не влияет на production. Если спросят про двойной вызов, объясни, что это intentional - чтобы выявить нечистые функции. Не углубляйся в детали реализации, если не спрашивают.

Что проверяет интервьюер

Интервьюер хочет убедиться, что ты понимаешь:

• Разницу между development и production режимами.
• Назначение Strict mode - не фича, а инструмент отладки.
• Конкретные проблемы, которые он выявляет (устаревшие lifecycle, побочные эффекты, ключи).
• Что Strict mode не изменяет поведение компонентов, а только добавляет проверки.

Также может проверить, знаешь ли ты, что двойной вызов эффектов - это intentional и не баг.

Типичные ошибки

• Думать, что Strict mode влияет на production-сборку - это не так, он отключается автоматически.
• Путать Strict mode с React.StrictMode и use strict в JavaScript - это разные вещи.
• Считать, что Strict mode исправляет ошибки - он только предупреждает.
• Игнорировать двойной вызов эффектов и считать его багом React.
• Оборачивать в Strict mode только часть приложения, не понимая, что проверки могут не сработать для компонентов вне обёртки.