React.js – популярная библиотека JavaScript, используемая для создания пользовательских интерфейсов. Одной из его наиболее мощных функций является хук useEffect, который позволяет выполнять побочные эффекты в функциональных компонентах. В этой статье мы рассмотрим различные случаи срабатывания перехватчика useEffect, сопровождаемые примерами кода. Итак, приступим!

Случай 1: Начальная отрисовка
При первоначальной отрисовке компонента перехват useEffect запускается после того, как компонент был смонтирован в DOM. Это распространенный вариант использования для получения данных из API или подписки на события. Вот пример:

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Perform initial setup here
    // Fetch data, subscribe to events, etc.
    return () => {
      // Cleanup function (optional)
      // Unsubscribe from events, cancel API requests, etc.
    };
  }, []);
  return <div>My Component</div>;
}

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

import React, { useState, useEffect } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // Perform effect only when 'count' changes
    console.log('Count changed:', count);
  }, [count]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <span>Count: {count}</span>
    </div>
  );
}

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

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Perform setup here
    return () => {
      // Cleanup function
      // Clean up resources, cancel subscriptions, etc.
    };
  }, []);
  return <div>My Component</div>;
}

Хук useEffect в React.js предоставляет мощный механизм управления побочными эффектами в функциональных компонентах. Понимая различные случаи, в которых он запускается, вы можете контролировать, когда и как выполняются ваши побочные эффекты. В этой статье мы рассмотрели исходный вариант рендеринга, случай изменения массива зависимостей и использование функций очистки. Вооружившись этими знаниями, вы теперь можете эффективно использовать хук useEffect в своих приложениях React.js.