Что такое StrictMode и почему нужно его использовать

StrictMode (строгий режим) - это инструмент для выделения потенциальных проблем в приложении. Он активирует дополнительные проверки и предупреждения.

StrictMode не отображает ничего визуального (похожего на Fragment), но обнаруживает потенциальные проблемы в коде и даёт полезные предупреждения. Строгий режим работает только в режиме разработки (development) и не влияет на сборку.

Сегодня этот пост полезно читать не как “включи модный флаг”, а как напоминание о важной практике: если StrictMode что-то подсвечивает, это обычно не шум, а ранний сигнал о хрупком месте в коде или зависимости.

StrictMode помогает обнаружить:

Устаревший код и устаревшие API

Как и всё остальное, что сделано из кода, React со временем меняется, и то, что когда-то считалось современным, в конечном итоге становится устаревшим и заменяется. Например, findDOMNode, который устарел в строгом режиме и, возможно, будет удален в будущей версии React. Другими примерами являются использование String Refs и устаревшего context API, которые вызывают некоторые “проблемы”.

Небезопасные методы жизненного цикла

Начиная с версии 16.9 React выдаёт предупреждение при использовании любого из методов жизненного цикла componentWillMount, componentWillReceiveProps и componentWillUpdate. Надеюсь, что ты уже преобразовал эти методы в более безопасные альтернативы (если нет, тебе следует как минимум добавить префикс «UNSAFE_»). Строгий режим может помочь определить небезопасные методы жизненного цикла в собственном коде и в сторонних библиотеках, а также предложит альтернативу.

Неожиданные побочные эффекты

В Concurrent Mode React может запускать метод рендеринга несколько раз, прежде чем вносить изменения (например, изменить DOM). Поэтому важно, чтобы этот метод не содержал побочных эффектов, которые могут привести к утечкам памяти и неверному состоянию. Строгий режим не может обнаружить побочные эффекты автоматически. Но он использует хоть простой, но умный трюк - методы constructor, render, setState и getDerivedStateFromProps запускаются дважды, тем самым облегчая обнаружение побочных эффектов. Если это приводит к какому-либо странному поведению в приложении, ты знаешь, что искать.

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

Самый простой способ - обернуть весь компонент приложения в <React.StrictMode> </React.StrictMode> в файле index.js:

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Также, можно его использовать, обернув один или несколько компонентов:

import React from "react";

class Hello extends React.Component {
  render() {
    return (
      <div>
        <React.StrictMode>...</React.StrictMode>
      </div>
    );
  }
}

Представленный в версии React 16.3 в марте 2018 года StrictMode, не оказывает никакого влияния на production, поэтому ты всегда можешь оставить его в коде. При разработке он будет показывать полезные предупреждения в консоли браузера.

Итог

Самая частая ошибка со StrictMode - воспринимать его предупреждения как раздражающий шум и отключать режим при первых проблемах. На практике он полезен ровно тем, что показывает, где код или библиотека могут повести себя плохо под нагрузкой, при повторных рендерах или во время будущих миграций.