Un esempio di Hook useCallback – La lista di oggetti tramite API

Introduzione al Hook useCallback per l’attivazione di una funzione

Supponiamo di avere un componente “ItemList” che mostra una lista di elementi e che ha una funzione “handleClick” che viene chiamata ogni volta che l’utente clicca su uno degli elementi della lista. Questa funzione deve eseguire un’operazione costosa in termini di performance, ad esempio effettuare una chiamata a un’API esterna.

Se la funzione “handleClick” viene definita all’interno del componente funzionale, essa viene ricreata ogni volta che il componente viene renderizzato, anche se lo stato del componente non è cambiato. Questo può causare un degrado delle prestazioni, in quanto la funzione deve essere ricreata ogni volta, anche se non è cambiata.

Per evitare questo problema, possiamo utilizzare il “useCallback” hook per memorizzare la funzione “handleClick” in modo che venga creata solo una volta e poi riutilizzata in tutte le renderizzazioni successive solo se necessario.

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

export default function ItemList({ items }) {
  const [selectedItem, setSelectedItem] = useState(null);

  // definizione della funzione "handleClick" utilizzando il "useCallback" hook
  const handleClick = useCallback(
    (itemId) => {
      // eseguiamo l'operazione costosa, ad esempio una chiamata a un'API esterna
      fetch(`https://api.example.com/items/${itemId}`)
        .then(response => response.json())
        .then(data => setSelectedItem(data));
    },
    [] // la dipendenza vuota significa che la funzione viene creata solo una volta
  );

  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </li>
      ))}
      {selectedItem && (
        <div>
          <h2>{selectedItem.name}</h2>
          <p>{selectedItem.description}</p>
        </div>
      )}
    </ul>
  );
}