Un esempio di Hook useEffect – Lista utenti da server

L’utilizzo dello Hook useEffect (effetto collaterale)

A differenza dello useState, possiamo utilizzare lo Hook useEffect per definire un comportamento come effetto collaterale di una invocazione. Supponiamo di voler aggiornare lo stato solo quando si riceve la risposta da parte di un server esterno (in questo caso viene utilizzata una RESTful API pubblica):

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

function UserList() {
  // dichiarazione dello stato locale "users" e della funzione per aggiornarlo "setUsers"
  const [users, setUsers] = useState([]);

  // definizione dell'effetto collaterale che recupera i dati dal server
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

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

In questo esempio, il componente funzionale “UserList” utilizza lo “useState” hook per dichiarare e gestire il proprio stato locale “users”. Viene inoltre utilizzato lo “useEffect” hook per definire un effetto collaterale che recupera i dati degli utenti dal server utilizzando la fetch API.

La funzione passata come primo parametro allo “useEffect” viene chiamata ogni volta che il componente viene montato, aggiornato o smontato. In questo caso, viene eseguita solo al momento del montaggio del componente, poiché lo array vuoto [] passato come secondo parametro impedisce l’esecuzione dell’effetto collaterale quando il componente viene aggiornato o smontato.

La funzione dell’effetto collaterale utilizza l’API fetch per recuperare i dati degli utenti dal server e li aggiunge allo stato “users” utilizzando la funzione “setUsers”. Infine, viene restituito il markup JSX del componente che mostra la lista degli utenti recuperati dal server.

Questo è solo un esempio di come utilizzare lo “useEffect” hook all’interno di un componente funzionale per gestire gli effetti collaterali. Lo “useEffect” hook può essere utilizzato per molti altri scopi, come ad esempio la gestione dell’input dell’utente, la manipolazione del DOM o l’integrazione con librerie esterne.