Встречается на собеседованиях • сегодня

Как воспроизвести методы жизненного цикла через useEffect

В React функциональных компонентах методы жизненного цикла эмулируются через useEffect:

componentDidMount - эффект с пустым массивом зависимостей:

jsx

useEffect(() => {
  // Код выполнится после монтирования
}, []);

componentDidUpdate - эффект с зависимостями:

jsx

useEffect(() => {
  // Код выполнится при изменении зависимостей
}, [dep1, dep2]);

componentWillUnmount - возврат функции очистки:

jsx

useEffect(() => {
  return () => {
    // Код выполнится перед размонтированием
  };
}, []);

shouldComponentUpdate - аналог React.memo или useMemo/useCallback для оптимизации

Пример комбинированного использования:

jsx

useEffect(() => {
  // Монтирование (componentDidMount)
  const timer = setInterval(() => {}, 1000);
  
  return () => {
    // Размонтирование (componentWillUnmount)
    clearInterval(timer);
  };
}, []);

useEffect(() => {
  // Обновление (componentDidUpdate)
  if (prevValue !== value) {
    doSomething();
  }
}, [value]);

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы