Top.Mail.Ru
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+2

Объясните что такое useEffect в React простыми словами, не могу разобраться

По дате
По рейтингу
Аватар пользователя
Просветленный

useEffect – это хук в библиотеке React, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты – это операции, которые могут влиять на другие компоненты или которые должны выполняться после того, как React обновил DOM, например, запросы к API, подписки, изменение DOM напрямую и так далее.
Как работает useEffect:

  1. Выполнение после рендеринга: useEffect запускается после того, как компонент отрендерился и коммитнул изменения в DOM. Это значит, что вы можете быть уверены, что ваш компонент и все его подкомпоненты уже отрендерены, когда код внутри useEffect выполняется.

  2. Зависимости: Вы можете указать массив зависимостей вторым аргументом хука useEffect. Если массив пустой ([]), эффект выполнится один раз после первого рендеринга. Если в массиве есть переменные, эффект будет выполняться каждый раз, когда эти переменные изменяются.

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

12345678910111213141516171819
 import React, { useState, useEffect } from 'react'; 
 
function ExampleComponent() { 
  const [count, setCount] = useState(0); 
 
  // Эффект для обновления заголовка документа, используя API браузера 
  useEffect(() => { 
    document.title = `Вы нажали ${count} раз`; 
  }, [count]); // Эффект зависит от переменной count 
 
  return ( 
    <div> 
      <p>Вы нажали {count} раз</p> 
      <button onClick={() => setCount(count + 1)}> 
        Нажми на меня 
      </button> 
    </div> 
  ); 
} 

В этом коде useEffect используется для изменения заголовка документа каждый раз, когда переменная count изменяется.

Аватар пользователя
Мудрец

Способ отслеживания изменения состояния. Также часто используется для запроса данных.