introduzione

L'hook useEffectè uno degli hook React importanti che devi conoscere. Ti consente di eseguire effetti collaterali nei componenti funzionali ogni volta che si verifica un cambiamento. Quindi, con l' useEffecthook, puoi fare molte cose in React come recuperare i dati, lavorare con il DOM e molto altro.

In questo articolo impareremo a conoscere l'hook UseEffect in React con alcuni esempi pratici. Entriamo subito.

Come usare UseEffect?

L'hook useEffectaccetta due parametri. Il primo è obbligatorio, che è una funzione di callback. D'altra parte, il secondo parametro (array di valori o array vuoto) è opzionale e lo usiamo quando vogliamo che l'hook venga eseguito dopo il momento in cui un valore specifico viene visualizzato nella nostra applicazione.

Per iniziare a usare hook useEffect, dovrai prima importarlo dal pacchetto React.

Ecco un esempio:

import React, { useEffect } from 'react';

Quando qualcosa nella tua applicazione si aggiorna e vuoi fare qualcosa, allora dovresti usare useEffect. L'esempio seguente accede al DOM per cambiare lo sfondo del corpo con useEffect:

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

Ecco l'esempio:

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

Possiamo anche eseguire effetti collaterali quando un valore specifico nel nostro componente cambia.

Ecco un esempio:

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

La funzione di pulizia

Quando la tua applicazione deve definire molti effetti collaterali, dovrai utilizzare una funzione di pulizia che ripulirà ogni effetto collaterale quando si verifica. In caso contrario, influirai sulle prestazioni dell'applicazione.

Facciamo un semplice esempio in cui avrai una pagina web che mostra la larghezza dello schermo in pixel quando un utente ridimensiona la pagina. Per questo, avremo bisogno di un evento di ridimensionamento.

Ecco l'esempio:

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
);

La funzione di pulizia viene restituita all'interno della funzione di callback e ci consente di rimuovere gli eventi dopo che si sono verificati.

Recupero dei dati con UseEffect

Un altro effetto collaterale dell'hook useEffectè il recupero dei dati dalle API. Puoi recuperare i tuoi dati come fai con Vanilla JavaScript, devi solo farlo all'interno della funzione di callback dell'hook useEffectse stai usando .then()e catch()per gestire la promessa restituita.

Ecco un esempio di recupero dei dati degli utenti dall'API GitHub:

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>
</>
)
}

Ecco un esempio:

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>
    </>
  );
}

Conclusione

useEffectè il gancio più importante che devi capire quando hai a che fare con React. Ti consente di aggiungere facilmente funzionalità ed eseguire effetti collaterali nei componenti funzionali.

Grazie per aver letto questo articolo. Spero che tu l'abbia trovato utile.

Ulteriori letture

Se sei interessato a contenuti più utili relativi a JavaScript e allo sviluppo web, puoi iscriverti alla mia newsletter.