Как использовать хуки эффекта в React.js?

@mona_terry 

@mona_terry 

Хуки эффекта в React.js используются для выполнения побочных эффектов в функциональных компонентах. Например, загрузка данных с сервера, подписка на события или изменение DOM элементов.

Для использования хуков эффекта в React.js, необходимо импортировать useEffect из библиотеки React.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Код, который нужно выполнить при монтировании компонента
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      {data ? (
        <p>Data loaded: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

В примере выше, useEffect используется для вызова функции fetchData при монтировании компонента (когда значение зависимостей указано пустым массивом []). Код внутри функции будет выполнен один раз при монтировании компонента.

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

Надеюсь, это поможет вам начать использовать хуки эффекта в ваших проектах на React.js! Если у вас есть еще вопросы, не стесняйтесь задавать.