Хук useEffect в React | Кодементор

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

Чтобы начать использовать хук, вы должны сначала импортировать его в свое приложение.

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

Теперь внутри вашего класса компонента приложения вы можете использовать импортированный хук. использованиеЭффект принимает функцию в качестве первого параметра. Эта функция будет вызываться, когда ваш компонент «смонтирован», «обновлен» и «размонтирован» внутри вашего приложения… каждый раз.

const App = () => {
  useEffect(() => {
    //what should I do in here?
  });
  
  return (
    <div></div>
  );
};  

Хук useEffect — идеальное место для выполнения HTTP-запросов внутри вашего приложения, но, поскольку DOM часто обновляется в проекте React, все, что вы делаете внутри этой функции, будут вызвать бесконечные циклы или нежелательные проблемы внутри вашего приложения, что может привести к тому, что вы начнете искать ошибки в своем коде.

Итак, вот как вы контролируете, как часто функция внутри вашего использованиеЭффект вызывается.

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

const App = () => {
  useEffect(() => {
    //make an http request
  }, []);
  
  return (
    <div></div>
  );
};  

Как видите, я дал использованиеЭффект пустой массив. Потому что массив пустой использованиеЭффект теперь будет запускать функцию только тогда, когда компонент монтируется после обновления DOM.

Так что, если вы хотите запускать эту функцию, когда какое-то значение изменяется внутри вашего компонента, на который опирается ваше приложение? Для этого тоже есть решение.

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

const App = () => {
  useEffect(() => {
    //make an http request
  }, [someValue]);
  
  return (
    <div></div>
  );
};  

Теперь useEffect будет запускаться при монтировании компонента, а также будет запускать эту функцию, если «someValue» когда-либо изменится внутри вашего компонента. Вы можете добавить столько значений внутри массива, сколько вы хотите, чтобы useEffect отслеживал.

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