Sobes.tech
Назад к вопросам
Middle
6

Расскажите про хуки и жизненный цикл компонентов в React.

Компании, где спрашивали
SIB

Ответ от нейросети

sobes.tech AI

В React хуки — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах, без необходимости писать классы. Основные хуки — useState, useEffect, useContext и др.

Жизненный цикл компонентов в классах делится на фазы: монтирование, обновление и размонтирование. В функциональных компонентах useEffect позволяет выполнять побочные эффекты, имитируя методы жизненного цикла:

  • componentDidMount — useEffect с пустым массивом зависимостей []
  • componentDidUpdate — useEffect с зависимостями
  • componentWillUnmount — функция очистки в useEffect

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

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

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

  return <div>Секунд прошло: {count}</div>;
}

Таким образом, хуки позволяют более гибко управлять состоянием и жизненным циклом компонентов.