Введение в крючок useEffect

Что такое крючки React?

В React существуют хуки, которые, по сути, дают функциональным компонентам право «подключаться» к функциям React, таким как состояние и другие методы. Есть три общих правила, которые следует учитывать при работе с хуками.

Правила React Hooks:

1. Хуки можно вызывать только внутри компонентов функций React.
2. Хуки могут быть вызваны только на верхнем уровне компонента функции
3. Хуки не могут быть условными

Побочные эффекты

Функция считается имеющей побочный эффект, если она вызывается и вызывает изменения за пределами самой функции. Примерами распространенных побочных эффектов являются выполнение запросов, получение данных из базы данных, включение таймера, прямое обновление DOM и т.д.

Крючок useEffect

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

import React, { useEffect } from "react";

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

function App() {
 //side effect function
  useEffect(
     () => {
       console.log("Hello, I am second");
     }
  );
  console.log("Hi, I am first");
  return (
    <div> 
       <button>Click me</button>
       <input type="text" placeholder="Type here..." />
    </div>
  )
}

Когда мы выполним приведенный выше код, сообщения будут появляться в таком порядке:
1. Привет, я первый
2. Здравствуйте, я второй

Передавая консольное сообщение в хуке useEffect, мы говорим компоненту функции сделать что-то после рендеринга, что является консольной записью сообщения, которое мы хотим получить. Мы можем делать и другие вещи в хуке, такие как получение данных, создание таймера или обновление DOM.

Зависимости useEffect

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

Без зависимости

useEffect(() => {
   //Runs on every render
});

Пустой массив

useEffect(() => {
   //Runs only on the first render
}, []);

Значение реквизита/состояния

useEffect(() => {
   //Runs on the first render 
   //And when dependency value changes 
}, [prop, state]);

Теперь, когда у вас есть вводные знания, необходимые для использования хука useEffect, идите и попробуйте его в деле! Удачи!