Введение

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

В этой статье мы узнаем о хуке UseEffect в React на нескольких практических примерах. Давайте прямо в это.

Как использовать UseEffect?

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

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

Вот пример:

import React, { useEffect } from 'react';

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

useEffect(()=>{
  document.body.style.background = "black";
});

Вот пример:

useEffect(()=>{
  document.body.style.background = "blue";
},[]);

Мы также можем выполнять побочные эффекты при изменении определенного значения в нашем компоненте.

Вот пример:

useEffect(()=>{
  console.log('Only run on name change')
},[name]);

Функция очистки

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

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

Вот пример:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const App = () =>{
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(()=>{
    window.addEventListener("resize", ()=>{
      setScreenWidth(window.innerWidth);
    });
    // Return the cleanup function which cleans the effect(event).
    return ()=>{
      window.removeEventListener("resize", ()=>{
        setScreenWidth(window.innerWidth);
      });
    }
  });
return <>
  <div>{screenWidth}</div>
  </>
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
  rootElement
);

Функция очистки возвращается внутри функции обратного вызова и позволяет нам удалять события после их возникновения.

Получение данных с помощью UseEffect

Еще один побочный эффект хука useEffect— получение данных из API. Вы можете получить свои данные так же, как и с ванильным JavaScript, вам просто нужно сделать это внутри функции обратного вызова хука useEffect, если вы используете .then()и catch()обработать возвращенное обещание.

Вот пример получения данных о пользователях из GitHub API:

const App = ()=>{
 // The API URL.
 const APIurl = 'https://api.github.com/users';
 
// useState.
 const [users, setUsers] = useState([]);
 
// useEffect.
 useEffect(()=>{
  fetch(APIurl)
   .then(res => res.json())
   .then(data => setUsers(data));
},[]);
return(
<>
 <ul>
 {users.map(user => (
  <li key={user.id}>{user.login}</li>
 ))}
 </ul>
</>
)
}

Вот пример:

const App = ()=>{
// The API URL.
  const APIurl = 'https://api.github.com/users';
// useState.
  const [users, setUsers] = useState([]);
// useEffect.
  useEffect(()=>{
    getUser();}
    ,[]);
// Separate function.
  async function getUser() {
    const response = await fetch(APIurl);
    const data = await response.json();
    setUsers(data);
  }return(
    <>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
    </>
  );
}

Вывод

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

Спасибо, что прочитали эту статью. Я надеюсь, что вы сочли полезным.

Дальнейшее чтение

Если вас интересует более полезный контент, связанный с JavaScript и веб-разработкой, вы можете подписаться на мою рассылку.