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

Как реализовать жизненные циклы компонентов с помощью useEffect

В React с хуками useEffect позволяет управлять жизненным циклом компонента. Основные сценарии:

Монтирование (аналог componentDidMount):

jsx

useEffect(() => {
  // Код выполнится при монтировании
  console.log('Компонент смонтирован');
  
  return () => {
    // Код выполнится при размонтировании
    console.log('Компонент будет размонтирован');
  };
}, []); // Пустой массив зависимостей

Обновление (аналог componentDidUpdate):

jsx

useEffect(() => {
  // Код выполнится при каждом обновлении
  console.log('Компонент обновился');
});

Зависимость от пропсов/стейта:

jsx

useEffect(() => {
  // Код выполнится при изменении переменной count
  console.log(`Count изменился: ${count}`);
}, [count]); // Указание зависимостей

Очистка (аналог componentWillUnmount):

jsx

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  
  return () => {
    clearInterval(timer); // Очистка при размонтировании
  };
}, []);

Важно помнить, что useEffect выполняется после рендера компонента. Для синхронных операций до рендера используйте useLayoutEffect.

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

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

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

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

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

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

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

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

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