§ useEffect hook

В React.js съществуват много хукуве, които ни помагат да управляваме състоянието и жизнения цикъл на компонентите. Един от най-популярните хукуве е useEffect, който ни позволява да се справяме със странични ефекти в нашите компоненти.

Защо използваме useEffect

Независимо дали искаме да извикаме API заявка, да управляваме анимации или да извършваме други асинхронни операции, useEffect е инструментът, който ни позволява да направим това.

Как работи useEffect

useEffect приема два аргумента - функция и масив от зависимости. Функцията се извиква всеки път, когато се промени някоя от зависимостите. Ако масивът от зависимости е празен, функцията се извиква само веднъж при монтиране на компонента.

Пример

Нека разгледаме пример, където използваме useEffect за извикване на API заявка и показване на резултатите в нашия компонент.

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

const UsersComponent = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      {users.map(user =>
        <div key={user.id}>{user.name}</div>
      )}
    </div>
  );
};

export default UsersComponent;