Что такое Strict Mode в React?

Что такое Strict Mode в React?

Strict Mode — это встроенный компонент React, который помогает выявить потенциальные проблемы в приложении. Он не выполняет никаких дополнительных рендеров в production, но в разработке проводит дополнительные проверки и выводит предупреждения в консоль.

Как использовать Strict Mode

import React from react;
import App from ./App;

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

Оборачиваем приложение (или его часть) в компонент <React.StrictMode>, и он начнёт проверять всё, что находится внутри.

Что проверяет Strict Mode?

1. Компоненты с недопустимыми побочными эффектами

Strict Mode намеренно дважды вызывает некоторые функции:

• Функция конструктора компонента
• Функция render()
• Функция обновления состояния в useState
• Функция getDerivedStateFromProps
• Функция аргумента updater в setState

Это помогает выявить компоненты, которые не являются чистыми функциями:

// ❌ Плохо — имеет побочный эффект
function Counter() {
  const [count, setCount] = React.useState(0);
  
  // Этот console.log будет вызван ДВАЖДЫ в Strict Mode
  console.log("Component rendered");
  
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// ✅ Хорошо — чистая функция
function Counter() {
  const [count, setCount] = React.useState(0);
  
  React.useEffect(() => {
    // Побочные эффекты должны быть в useEffect
    console.log("Component rendered");
  }, []);
  
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2. Использование deprecated API

Strict Mode выводит предупреждения, если вы используете устаревшие методы:

// ❌ Deprecated — вызывает warning
class MyComponent extends React.Component {
  componentWillMount() {
    // Этот метод deprecated
  }
}

// ✅ Правильно
class MyComponent extends React.Component {
  componentDidMount() {
    // Используем современный метод
  }
}

3. Использование небезопасных строк в refs

// ❌ Deprecated — string refs
class MyComponent extends React.Component {
  render() {
    return <input ref="inputRef" />;
  }
  
  focusInput() {
    this.refs.inputRef.focus();
  }
}

// ✅ Правильно — useRef hook
function MyComponent() {
  const inputRef = React.useRef(null);
  
  const focusInput = () => {
    inputRef.current.focus();
  };
  
  return <input ref={inputRef} />;
}

4. Обнаружение unexpected side effects

Strict Mode вызывает функции дважды для обнаружения компонентов, которые не могут быть вызваны несколько раз без проблем:

// ❌ Проблематично
let globalId = 0;

function User({ name }) {
  const userId = globalId++; // Каждый вызов увеличивает globalId!
  return <div>{name} (ID: {userId})</div>;
}

// В Strict Mode это сломается, потому что
// globalId будет увеличен 2 раза вместо 1

// ✅ Правильно
function User({ name }) {
  const [userId] = React.useState(() => {
    // Инициализатор useEffect вызывается один раз
    return Math.random();
  });
  
  return <div>{name} (ID: {userId})</div>;
}

Двойной рендер в разработке

function MyComponent() {
  console.log("Render"); // Будет напечатано ДВАЖДЫ в Strict Mode (dev только)
  
  return (
    <div>
      <button onClick={() => console.log("Clicked")}>Click me</button>
    </div>
  );
}

// Консоль в разработке:
// Render
// Render
// (одна пустая строка разделяет два вызова)

React 18+ — Эффект от Strict Mode усилился

В React 18 Strict Mode дополнительно:

• Монтирует компонент
• Размонтирует его
• Вновь монтирует его

Это помогает выявить проблемы с очисткой эффектов:

function DataFetcher() {
  const [data, setData] = React.useState(null);
  
  React.useEffect(() => {
    // В Strict Mode этот эффект запустится:
    // 1. Запустится
    // 2. Очистится
    // 3. Запустится снова
    
    const controller = new AbortController();
    
    fetch(/api/data, { signal: controller.signal })
      .then(r => r.json())
      .then(setData);
    
    return () => controller.abort();
  }, []);
  
  return <div>{data}</div>;
}

Отключение Strict Mode (не рекомендуется)

// Если вы уверены, что код правильный
root.render(
  <App /> // Без StrictMode
);

НО это не рекомендуется. Strict Mode помогает выявить реальные проблемы.

Частичное применение

function App() {
  return (
    <div>
      <React.StrictMode>
        {/* Только эта часть будет проверяться */}
        <OldComponent />
      </React.StrictMode>
      
      <NewComponent />
    </div>
  );
}

Заключение

Strict Mode — это инструмент разработчика, который помогает писать более надёжный код React. Хотя в production он никак не влияет на производительность, в разработке выявляет проблемы, которые могут привести к сложным ошибкам. Двойной рендер может показаться странным, но это специально сделано для обнаружения побочных эффектов, которых не должно быть в функциях React компонентов.