Frontend | Вопросы собесов

Как использовать useeffect ?

Спросят с вероятностью 13%



useEffect — это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.



Синтаксис:

useEffect(() => {

  // Ваш код для побочного эффекта

  return () => {

    // Очистка (необязательно)

  };

}, [зависимости]);

✅ Функция побочного эффекта: Это его основное тело, где вы помещаете код, который должен выполняться после каждого рендеринга (по умолчанию) или когда изменяются определённые зависимости.

✅ Очистка: Функция очистки выполняется перед тем, как компонент будет удалён, а также перед следующим выполнением эффекта. Это идеальное место для отмены подписок, таймеров и других ресурсов, чтобы избежать утечек памяти.

✅ Массив зависимостей: Определяет, при изменении каких значений должен повторно выполняться эффект. Если массив пуст ([]), эффект выполнится один раз после первого рендеринга. Если массив не указан, эффект будет выполняться после каждого рендеринга.



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



1️⃣ Запуск эффекта один раз



Чтобы выполнить эффект один раз после первого рендеринга (аналог componentDidMount в классовых компонентах), используйте пустой массив зависимостей:

useEffect(() => {

  // Код здесь будет выполнен один раз после инициализации компонента

}, []);

2️⃣ Выполнение при изменении зависимостей



Чтобы выполнить эффект при изменении определённых значений:

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



useEffect(() => {

  // Код здесь будет выполнен каждый раз, когда изменяется значение count

  document.title = Вы нажали ${count} раз;

}, [count]); // Зависимости

3️⃣ Очистка эффекта



Пример использования функции очистки:

useEffect(() => {

  const timerID = setInterval(() => {

    // Ваша логика здесь

  }, 1000);



  return () => {

    clearInterval(timerID); // Очистка при размонтировании компонента

  };

}, []); // Эффект выполнится один раз

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



👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.



🧩 Идущий | 🔐 Собесы | 🔐 Тестовые