Различные методы установки состояния в хуке useEffect в React

Чтобы установить состояние в хуке useEffect, вы можете использовать следующие методы:

Метод 1: использование массива зависимостей

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [myState, setMyState] = useState('');
  useEffect(() => {
    setMyState('Updated state value');
  }, []);
  return (
    <div>
      <p>{myState}</p>
    </div>
  );
};
export default MyComponent;

В этом методе пустой массив зависимостей ([]) предоставляется в качестве второго аргумента перехватчика useEffect. Это гарантирует, что эффект запускается только один раз, аналогично методу жизненного цикла comComponentDidMountв компонентах класса.

Метод 2: использование переменной состояния в массиве зависимостей

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [myState, setMyState] = useState('');
  useEffect(() => {
    setMyState('Updated state value');
  }, [myState]);
  return (
    <div>
      <p>{myState}</p>
    </div>
  );
};
export default MyComponent;

В этом методе переменная состояния myStateвключается в массив зависимостей. Всякий раз, когда значение myStateизменяется, эффект срабатывает и состояние обновляется.

Метод 3. Использование функции очистки

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [myState, setMyState] = useState('');
  useEffect(() => {
    setMyState('Updated state value');
    return () => {
      // Cleanup code here
    };
  }, []);
  return (
    <div>
      <p>{myState}</p>
    </div>
  );
};
export default MyComponent;

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