Hook

• 1 minuto

Gli hook sono un modello comune nei framework in cui i valori cambiano o si verificano altri eventi. In maniera centralizzata, inseriscono codice personalizzato da eseguire quando lo stato cambia o in altre fasi del ciclo di vita di un'applicazione.

Hook Effect

In questa unità viene illustrato nel dettaglio l'hook Effect. Questo hook viene generato ogni volta che si imposta il valore di stato. Viene generato quando vengono impostati il valore iniziale e tutti gli aggiornamenti successivi.

L'hook Effect consente di eseguire codice in risposta all'impostazione del valore. Il codice eseguito può avere effetti collaterali, quindi è possibile aggiornare i valori in base alle necessità.

Quando usare l'hook Effect

È possibile usare l'hook Effect ogni volta che occorre centralizzare il codice per rispondere a una modifica dello stato. Si immagini un modulo complesso che contiene molti valori. In genere occorre disabilitare il pulsante Invia finché i dati che devono essere inviati al server non sono in uno stato valido. Si supponga di avere eventi per singoli valori i cui dati sono cambiati. Dopo che un utente seleziona un paese/area geografica nell'applicazione, è necessario recuperare un elenco di province dal server.

Non si vuole che ogni listener di eventi esamini lo stato per verificare se i dati sono pronti per essere inviati al server. Questa configurazione non sarebbe efficiente. Si potrebbe invece usare un hook Effect. Un hook Effect può creare una funzione che analizza i dati. Se i dati sono in uno stato valido, può abilitare il pulsante Invia.

useEffect

Per registrare un listener per l'hook Effect, usare useEffect. useEffect accetta una funzione senza parametri da eseguire quando lo stato cambia.

useEffect(() => {
    // code goes here
});

Per impostazione predefinita, useEffect viene eseguito ogni volta che lo stato cambia in qualsiasi oggetto con stato. È possibile specificare una dipendenza per abilitare l'hook solo per un gruppo specifico di oggetti.

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);