Custom Hooks

Introduzione

I custom hooks permettono di estrarre e riutilizzare logica che usa hooks built-in (come useState e useEffect) tra più componenti. Sono funzioni che iniziano con “use” e possono contenere altri hooks, permettendo di incapsulare pattern comuni come data fetching, gestione di form, o logica di business complessa.

Regole degli Hooks e Custom Hooks

Le regole degli hooks si applicano anche ai custom hooks:

1. Hooks solo in componenti o altri hooks: Gli hooks possono essere usati solo all’interno di funzioni componenti o di altri custom hooks
2. Nessun nesting condizionale: Gli hooks non possono essere dentro if, loop, o funzioni annidate

La prima regola è importante perché permette di usare hooks built-in all’interno di custom hooks, creando funzioni riutilizzabili che incapsulano logica complessa.

Perché Creare Custom Hooks

Quando più componenti condividono la stessa logica (ad esempio, data fetching con gestione di loading ed errori), invece di duplicare codice si può estrarre quella logica in un custom hook. Questo permette di:

• Riutilizzare logica: Una volta scritto, il hook può essere usato in più componenti
• Mantenere componenti snelli: La logica complessa viene spostata fuori dal componente
• Testare separatamente: La logica può essere testata indipendentemente dai componenti

Creare un Custom Hook

Un custom hook è semplicemente una funzione che inizia con “use”. Questa convenzione è importante perché React (e gli strumenti di sviluppo) riconoscono queste funzioni come hooks e applicano le regole degli hooks.

1
import { useState, useEffect } from 'react';
2

3
export function useFetch(fetchFn, initialValue) {
4
  const [isFetching, setIsFetching] = useState(false);
5
  const [error, setError] = useState(null);
6
  const [fetchedData, setFetchedData] = useState(initialValue);
7

8
  useEffect(() => {
9
    async function fetchData() {
10
      setIsFetching(true);
11

12
      try {
13
        const data = await fetchFn();
14
        setFetchedData(data);
15
      } catch (err) {
16
        setError({
17
          message: err.message || 'Failed to fetch data'
18
        });
19
      } finally {
20
        setIsFetching(false);
21
      }
22
    }
23

24
    fetchData();
25
  }, [fetchFn]); // fetchFn come dipendenza
26

27
  return {
28
    isFetching,
29
    error,
30
    data: fetchedData,
31
    setData: setFetchedData
32
  };
33
}

1
// ❌ Errore: hooks possono essere usati solo in componenti o custom hooks
2
function normalFunction() {
3
  const [state, setState] = useState(); // Errore!
4
}
5

6
// ✅ Funziona: useFetch è riconosciuto come hook
7
function useFetch() {
8
  const [state, setState] = useState(); // OK!
9
}

Utilizzare un Custom Hook

Un custom hook viene chiamato come una normale funzione all’interno di un componente. Lo state gestito dal hook appartiene al componente che lo usa, quindi quando lo state cambia, il componente si ri-renderizza.

1
import { useFetch } from './hooks/useFetch';
2
import { fetchUserPlaces } from './http';
3

4
function App() {
5
  const {
6
    isFetching,
7
    error,
8
    data: userPlaces,
9
    setData: setUserPlaces
10
  } = useFetch(fetchUserPlaces, []);
11

12
  if (error) {
13
    return <Error title="An error occurred!" message={error.message} />;
14
  }
15

16
  return (
17
    <Places
18
      items={userPlaces}
19
      isLoading={isFetching}
20
      loadingText="Fetching your places..."
21
    />
22
  );
23
}

Il hook riceve una funzione fetchFn che viene eseguita internamente. Questo rende il hook generico e riutilizzabile per diversi tipi di data fetching.

State Indipendente tra Componenti

Ogni volta che un componente usa un custom hook, viene creata una copia indipendente dello state. Modificare lo state in un componente non influisce sugli altri componenti che usano lo stesso hook.

1
function ComponentA() {
2
  const { data, setData } = useFetch(fetchA, []);
3
  // State indipendente per ComponentA
4
}
5

6
function ComponentB() {
7
  const { data, setData } = useFetch(fetchB, []);
8
  // State completamente separato per ComponentB
9
}

Questo comportamento è identico a useState: ogni componente ottiene la propria istanza di state.

Esporre State e Funzioni

Un custom hook può restituire qualsiasi valore: state, funzioni di aggiornamento, o funzioni custom. Si può restituire un array o un oggetto:

1
// Restituire un oggetto (più leggibile)
2
return {
3
  isFetching,
4
  error,
5
  data: fetchedData,
6
  setData: setFetchedData
7
};
8

9
// Oppure un array (come useState)
10
return [fetchedData, isFetching, error];

Le funzioni di aggiornamento dello state possono essere esposte direttamente o wrappate in funzioni custom che aggiungono validazione o logica aggiuntiva.

Estendere Custom Hooks per Casi Complessi

Quando la logica di fetching richiede trasformazioni aggiuntive (ad esempio, sorting), si può creare una funzione wrapper che estende la funzione di fetch originale:

1
// Funzione wrapper che aggiunge sorting
2
async function fetchSortedPlaces() {
3
  // 1. Fetch dei dati originali
4
  const places = await fetchAvailablePlaces();
5

6
  // 2. Ottenere posizione utente (operazione asincrona)
7
  return new Promise((resolve) => {
8
    navigator.geolocation.getCurrentPosition((position) => {
9
      // 3. Sortare per distanza
10
      const sortedPlaces = sortPlacesByDistance(
11
        places,
12
        position.coords.latitude,
13
        position.coords.longitude
14
      );
15

16
      resolve(sortedPlaces);
17
    });
18
  });
19
}
20

21
// Usare la funzione wrapper con useFetch
22
function AvailablePlaces() {
23
  const { isFetching, error, data: availablePlaces } =
24
    useFetch(fetchSortedPlaces, []);
25

26
  // Il hook gestisce loading ed errori automaticamente
27
  // mentre fetchSortedPlaces gestisce la logica di sorting
28
}

Questo pattern mantiene il hook generico mentre la logica specifica rimane nella funzione di fetch.

1
function getCurrentPositionAsync() {
2
  return new Promise((resolve, reject) => {
3
    navigator.geolocation.getCurrentPosition(
4
      (position) => resolve(position), // Success callback
5
      (error) => reject(error)         // Error callback
6
    );
7
  });
8
}
9

10
// Ora può essere usata con async/await
11
const position = await getCurrentPositionAsync();

Riepilogo

• Custom hooks: Funzioni che iniziano con “use” e possono contenere altri hooks
• Convenzione “use”: Necessaria per far riconoscere la funzione come hook da React
• Riutilizzabilità: Estraggono logica comune per evitare duplicazione
• State indipendente: Ogni componente ottiene la propria istanza di state quando usa lo stesso hook
• Restituzione valori: Si può restituire un oggetto o array con state, funzioni e valori derivati
• Estensibilità: Funzioni wrapper possono aggiungere logica complessa mantenendo il hook generico
• Regole degli hooks: Si applicano anche ai custom hooks (no nesting condizionale, solo in componenti o altri hooks)