React StrictMode

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

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

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

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

• Устаревший код и устаревшие API;
• Небезопасные методы жизненного цикла;
• Неожиданные побочные эффекты.

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