Что будет если компонент обернуть тегом StrictMode?

Влияние React.StrictMode на компонент

React.StrictMode — это специальный инструмент для обнаружения потенциальных проблем в приложении, который активируется только в режиме разработки и не влияет на продакшен-сборку.

Основные эффекты оборачивания компонента в StrictMode:

1. Двойной вызов функций компонентов

React намеренно вызывает некоторые функции дважды для выявления побочных эффектов:

function UserProfile() {
  console.log('Тело компонента выполняется дважды в Dev Mode!');
  
  // Хуки также вызываются дважды
  const [count, setCount] = useState(() => {
    console.log('Инициализация состояния - дважды!');
    return 0;
  });
  
  useEffect(() => {
    console.log('Эффект выполняется дважды в Dev Mode!');
    return () => console.log('Клинуп тоже дважды!');
  }, []);
  
  return <div>Count: {count}</div>;
}

// В StrictMode это поможет обнаружить:
// - Нечистые вычисления
// - Неправильные побочные эффекты

2. Проверка устаревших API

StrictMode предупреждает об использовании deprecated API:

• UNSAFE_componentWillMount, UNSAFE_componentWillUpdate, UNSAFE_componentWillReceiveProps
• findDOMNode
• Legacy Context API (contextTypes, childContextTypes)

3. Обнаружение неожиданных сайд-эффектов

class ProblematicComponent extends React.Component {
  componentDidMount() {
    // StrictMode поможет обнаружить такие проблемы:
    this.setState({ count: this.state.count + 1 }); // Мутация состояния в componentDidMount
    document.title = `Count: ${this.state.count}`; // Сайд-эффект в рендеринге
  }
}

4. Проверка использования строковых ref

// Это вызовет предупреждение в StrictMode:
class MyComponent extends React.Component {
  render() {
    return <div ref="myRef">Устаревший ref</div>;
  }
}

// Вместо этого следует использовать:
function ModernComponent() {
  const myRef = useRef(null);
  return <div ref={myRef}>Современный ref</div>;
}

Практические примеры обнаружения проблем:

Обнаружение неправильных зависимостей useEffect:

function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    let isMounted = true;
    
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        if (isMounted) {
          setUsers(data);
          document.title = `Users: ${data.length}`; // ❌ Сайд-эффект!
        }
      });
    
    return () => {
      isMounted = false;
    };
  }, []); // StrictMode покажет, что нужно добавить зависимости
  
  return <div>{users.length} users</div>;
}

Выявление проблем с производительностью:

function ExpensiveComponent({ data }) {
  // StrictMode поможет обнаружить дорогие вычисления
  const processedData = useMemo(() => {
    console.log('Дорогое вычисление...');
    return data.map(item => heavyProcessing(item));
  }, [data]); // Важно правильно указать зависимости
  
  return <div>{processedData.length} items</div>;
}

Что НЕ делает StrictMode:

• Не влияет на продакшен — все проверки отключаются в production-сборке
• Не вызывает двойной рендеринг в production
• Не замедляет работу приложения в боевом режиме
• Не изменяет поведение корректно написанных компонентов

Рекомендации по использованию:

// Правильное использование:
function App() {
  return (
    <React.StrictMode>
      {/* Оборачивайте всё приложение или отдельные ветки */}
      <Router>
        <AppLayout>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/dashboard" element={<Dashboard />} />
          </Routes>
        </AppLayout>
      </Router>
    </React.StrictMode>
  );
}

// Или для конкретных проблемных областей:
function DevelopmentApp() {
  return (
    <>
      <React.StrictMode>
        <ProblematicFeature />
      </React.StrictMode>
      <StableFeature />
    </>
  );
}

Выводы:

1. StrictMode — инструмент разработки для выявления скрытых проблем
2. Двойной вызов функций помогает обнаружить непреднамеренные сайд-эффекты
3. Предупреждения об устаревших API упрощают миграцию на новые версии React
4. Поверхностная проверка ref-ов предотвращает использование устаревших паттернов
5. Обнаружение legacy context помогает переходить на современный Context API

Использование React.StrictMode — это best practice для всех React-приложений, которая помогает поддерживать код чистым, предсказуемым и готовым к будущим обновлениям React без неожиданных проблем в production.