Что такое React.StrictMode и зачем его использовать?
React.StrictMode
React.StrictMode — это специальный компонент-обёртка, который включает набор дополнительных проверок и предупреждений во время разработки. Он не рендерит никакого видимого UI и не влияет на production-сборку — все проверки выполняются только в режиме development.
Что делает StrictMode
1. Двойной вызов некоторых функций
StrictMode намеренно вызывает дважды функции компонентов, функции обновления состояния, тело useState-инициализаторов и useMemo/useCallback. Это помогает обнаружить побочные эффекты, которые не должны присутствовать в render-фазе.
2. Предупреждения об устаревших API
StrictMode предупреждает об использовании устаревших методов жизненного цикла, таких как componentWillMount, componentWillReceiveProps, componentWillUpdate, а также о других deprecated-паттернах.
3. Проверка эффектов (React 18+)
Начиная с React 18, StrictMode дополнительно монтирует, размонтирует и снова монтирует каждый компонент, чтобы убедиться, что эффекты корректно очищаются и не оставляют утечек.
Пример использования
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
// Оборачиваем всё приложение в StrictMode
<React.StrictMode>
<App />
</React.StrictMode>
);
Можно оборачивать только часть дерева:
function App() {
return (
<div>
<Header />
{/* Проверяем только эту часть приложения */}
<React.StrictMode>
<Main />
</React.StrictMode>
<Footer />
</div>
);
}
Почему компоненты вызываются дважды
Это намеренное поведение для обнаружения непредсказуемых побочных эффектов. Pure-функции при вызове с одинаковыми аргументами должны давать одинаковый результат — двойной вызов проверяет эту инвариантность.
function BadComponent() {
// Плохо: мутирует внешнюю переменную во время рендера
externalArray.push('item'); // будет добавлен дважды в StrictMode!
return <div>{externalArray.length}</div>;
}
function GoodComponent() {
// Хорошо: рендер чистый, побочных эффектов нет
const items = useMemo(() => computeItems(), []);
return <div>{items.length}</div>;
}
Важные нюансы
- StrictMode не ломает приложение — если поведение при двойном вызове отличается, это признак бага в коде, а не в StrictMode
- В production двойного вызова нет
console.logвнутри компонента будет вызываться дважды в dev-режиме — это нормально- Create React App и Next.js включают StrictMode по умолчанию
Что хочет услышать интервьюер
Кандидат понимает, что StrictMode работает только в development и не влияет на production
Кандидат знает, что компоненты рендерятся дважды намеренно — для поиска побочных эффектов
Кандидат может объяснить, какие конкретно проблемы помогает найти StrictMode (deprecated API, нечистые рендеры, утечки эффектов)
Кандидат понимает, что StrictMode можно применять к части дерева, а не только ко всему приложению
Кандидат не путает двойной рендер в dev с реальной проблемой производительности
Пример: Подключение StrictMode в точке входа
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
// StrictMode включает дополнительные проверки только в development
<React.StrictMode>
<App />
</React.StrictMode>
);
Пример: Пример нечистого рендера, который обнаружит StrictMode
// Плохо: мутация внешнего массива во время рендера
const log: string[] = [];
function BadComponent() {
// В StrictMode вызовется дважды — log получит 2 записи вместо 1
log.push(`render at ${Date.now()}`);
return <div>Renders: {log.length}</div>;
}
// Хорошо: нет побочных эффектов во время рендера
function GoodComponent() {
const [count, setCount] = React.useState(0);
// Побочный эффект изолирован в useEffect
React.useEffect(() => {
log.push(`mounted`);
return () => {
log.push(`unmounted`);
};
}, []);
return <div>Count: {count}</div>;
}
Типичные ошибки
Думают, что StrictMode влияет на production-сборку и замедляет приложение
Считают двойной вызов функций багом и пытаются отключить StrictMode вместо того, чтобы исправить нечистый код
Не знают, что в React 18 добавилось повторное монтирование/размонтирование компонентов
Путают StrictMode с TypeScript strict-режимом — это разные инструменты
Не понимают, зачем нужна чистота render-функции и почему мутации во время рендера опасны
AI-тренажеры
Практика в студии
4.8
