Что такое useEffect

Question

Что такое useEffect

Тип вопроса: React Вероятность: 33% Категория: Frontend Разработчик

Ответ

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

Основные случаи использования:

Запросы к API.
Подписки на события.
Работа с DOM.

Синтаксис:

useEffect(() => {
  // Эффект выполнится после рендера
  return () => {
    // Очистка (аналог componentWillUnmount)
  };
}, [dependencies]); // Зависимости для контроля выполнения

Пример:

import { useEffect, useState } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData);
  }, []); // Пустой массив = эффект только при монтировании

  return <div>{data ? data.message : 'Loading...'}</div>;
}

Важно:

Без зависимостей эффект выполняется после каждого рендера.
Пустой массив [] — только при монтировании.
Указанные зависимости — при их изменении.

Ответ 18+ 🔞

А, ну это же тот самый useEffect, про который все так пиздят! Слушай, это как волшебная палочка в Реакте, только вместо «вингардиум левиоса» — хуй с горой асинхронного кода.

Короче, представь: у тебя есть функциональный компонент, и тебе надо накостылить какую-нибудь побочную хуйню — данные с сервака стянуть, на событие подписаться или DOM поковырять. Раньше для этого были эти ёбаные методы жизненного цикла в классах: componentDidMount, componentDidUpdate. Сейчас же всё проще — один хук useEffect на все случаи жизни, как швейцарский нож, блядь.

Вот смотри, как он выглядит, этот красавец:

useEffect(() => {
  // Тут твоя магия, которая сработает после того, как компонент отрендерится
  // Например, запрос на сервер, подписка на событие, таймер

  return () => {
    // А это — опциональная функция очистки. Как componentWillUnmount, только круче.
    // Тут отписываешься от всего, чистишь таймеры, чтобы память не текла.
  };
}, [dependencies]); // А вот это, сука, самое важное — массив зависимостей.

Теперь про массив зависимостей, а то тут многие ебут мозг. Это как кнопка «повтор» на плеере:

Нет массива вообще — эффект будет срабатывать после КАЖДОГО рендера. Осторожно, а то заебёшь сервер запросами или устроишь бесконечный цикл, ёпта!
Пустой массив [] — эффект выполнится только один раз, при монтировании компонента. Идеально для начальной загрузки данных.
В массиве указаны переменные [a, b] — эффект будет перезапускаться только когда меняется a или b. Умно, да?

Вот живой пример, чтобы не быть пиздаболом:

import { useEffect, useState } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Эффект с пустым массивом зависимостей — сработает один раз, при первом рендере.
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  return <div>{data ? data.message : 'Загружаю, погоди, сука...'}</div>;
}

Или вот пример с подпиской и очисткой — чтобы не было утечек памяти, как в дырявом тазу:

useEffect(() => {
  const handleResize = () => {
    console.log('Окно изменилось, блядь!');
  };

  window.addEventListener('resize', handleResize);

  // Функция очистки — отписываемся при размонтировании компонента
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

Главное — не забывай про зависимости, а то будет как в том анекдоте: «запустил эффект, а он тебе в ответ — я тебя ебал, буду выполняться вечно». Чих-пых тебя в сраку, если забудешь!