React.StrictMode

Що таке StrictMode?

React.StrictMode — це інструмент для виявлення потенційних проблем в додатку. Він активує додаткові перевірки та попередження лише в режимі розробки.

javascript

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

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

Продукція:

StrictMode не впливає на продукційні збірки. Усі перевірки працюють лише в режимі розробки.

Для чого це потрібно?

StrictMode допомагає:

Визначити компоненти з небезпечними методами життєвого циклу
Попереджати про використання застарілого API
Виявляти несподівані побічні ефекти
Попереджати про використання застарілого контекстного API
Забезпечити повторне використання стану (React 18+)

Подвійний рендеринг

StrictMode навмисно викликає функції двічі, щоб допомогти виявити побічні ефекти:

javascript

function Counter() {
  const [count, setCount] = useState(0);
  
  console.log('Render'); // В StrictMode виведе двічі!

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Викликано двічі:

Тіло функціонального компонент
Функції всередині useState, useMemo, useReducer
Конструктор (для класових компонентів)
Методи render, shouldComponentUpdate, getDerivedStateFromProps

Виявлення побічних ефектів

Проблемний код

javascript

let globalCounter = 0;

function Component() {
  // Побічний ефект поза useEffect!
  globalCounter++; // В StrictMode збільшиться двічі
  
  return <div>Counter: {globalCounter}</div>;
}

Коректний код

javascript

let globalCounter = 0;

function Component() {
  useEffect(() => {
    // Побічні ефекти в useEffect
    globalCounter++;
    
    return () => {
      globalCounter--; // Очищення
    };
  }, []);
  
  return <div>Counter: {globalCounter}</div>;
}

Виявлення застарілих методів

StrictMode попереджає про використання застарілих методів життєвого циклу:

javascript

class MyComponent extends React.Component {
  componentWillMount() {
    // Попередження: застарілий метод
  }

  componentWillReceiveProps(nextProps) {
    // Попередження: застарілий метод
  }

  componentWillUpdate(nextProps, nextState) {
    // Попередження: застарілий метод
  }

  render() {
    return <div>Hello</div>;
  }
}

Коректні альтернативи

javascript

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // Замість componentWillReceiveProps та componentWillUpdate
    return null;
  }

  componentDidMount() {
    // Замість componentWillMount
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Щоб отримати інформацію перед оновленням DOM
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Працювати з snapshot
  }

  render() {
    return <div>Hello</div>;
  }
}

Виявлення застарілого контекстного API

Застарілий спосіб (попередження)

javascript

class Parent extends React.Component {
  static childContextTypes = {
    color: PropTypes.string
  };

  getChildContext() {
    return { color: 'purple' };
  }

  render() {
    return <Child />;
  }
}

Сучасний спосіб

javascript

const ThemeContext = React.createContext('light');

function Parent() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

Використання в частині додатку

Ви можете застосувати StrictMode лише до певних компонентів:

javascript

function App() {
  return (
    <div>
      <Header />
      
      <React.StrictMode>
        <Sidebar />
        <Content />
      </React.StrictMode>
      
      <Footer />
    </div>
  );
}

Header та Footer не будуть перевірятися, лише Sidebar та Content.

React 18: повторюваний стан

В React 18 StrictMode симулює демонтаж та повторний монтаж компонентів:

javascript

function Component() {
  useEffect(() => {
    console.log('Mount');
    
    return () => {
      console.log('Unmount');
    };
  }, []);

  return <div>Hello</div>;
}

В StrictMode виведе:

Mount
Unmount
Mount

Це допомагає забезпечити, щоб компонент правильно очищав ресурси під час демонтажу.

Проблеми з консоллю

Проблема

javascript

function Component() {
  console.log('Render'); // Виведе двічі в StrictMode
  
  return <div>Hello</div>;
}

Рішення 1: Ігнорувати

Пам'ятайте, що подвійний виклик відбувається лише в режимі розробки. У продукції буде один виклик.

Рішення 2: React DevTools

React DevTools автоматично видаляє дублікати логів з StrictMode:

javascript

// Встановіть розширення React DevTools
// Дублікати логів будуть автоматично приховані

Рішення 3: Обернути в умову

javascript

function Component() {
  if (process.env.NODE_ENV === 'development') {
    // Логи лише в режимі розробки, але все ще двічі
    console.log('Render');
  }
  
  return <div>Hello</div>;
}

Коли відключити StrictMode?

Не рекомендується відключати

StrictMode допомагає писати якісний код. Але є випадки:

Коли інтегруєте з сторонніми бібліотеками

Якщо бібліотека викликає попередження, які ви не можете виправити:

javascript

function App() {
  return (
    <div>
      <React.StrictMode>
        <MyApp />
      </React.StrictMode>
      
      {/* Стороння бібліотека без StrictMode */}
      <ThirdPartyComponent />
    </div>
  );
}

Коли налагоджуєте в консолі

Якщо подвійні логи заважають налагодженню, тимчасово відключіть:

javascript

// Тимчасово для налагодження
// <React.StrictMode>
  <App />
// </React.StrictMode>

Не забудьте відновити StrictMode після налагодження!

Найкращі практики

Використовуйте з самого початку

Додайте StrictMode при створенні проекту:

javascript

// index.js
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>
);

Виправляйте попередження

Не ігноруйте попередження StrictMode. Вони вказують на реальні проблеми.

Використовуйте в CI/CD

Переконайтеся, що тести виконуються з StrictMode:

javascript

// setupTests.js
import { render } from '@testing-library/react';

function renderWithStrictMode(ui) {
  return render(
    <React.StrictMode>
      {ui}
    </React.StrictMode>
  );
}

FAQ

Чи впливає StrictMode на продуктивність?

Ні, в продукції StrictMode повністю відключений. Усі перевірки працюють лише в режимі розробки.

Чому мій код виконується двічі?

Це навмисна поведінка StrictMode для виявлення побічних ефектів. У продукції код виконається один раз.

Чи слід обгортати весь додаток?

Рекомендується обгортати весь додаток, але ви можете застосовувати вибірково до проблемних частин.

Висновок

React.StrictMode:

Інструмент для виявлення проблем у розробці
Не впливає на продукцію
Навмисно викликає функції двічі
Попереджає про застарілі методи та API
Допомагає писати чистий код без побічних ефектів
Готує до майбутніх версій React
Рекомендується для використання в усіх проектах

На співбесідах:

Важливо вміти:

Пояснити, що таке StrictMode і для чого він потрібен
Описати, чому код виконується двічі
Перерахувати, які проблеми він допомагає виявити
Пояснити, що StrictMode не впливає на продукцію
Навести приклади правильного оброблення побічних ефектів

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань