Altri 8 hook React che devi conoscere

Jan 20, 2024

Di Matthew Tyson

Architetto software, InfoWorld |

React rimane il battistrada tra i framework dell'interfaccia utente JavaScript. Ci sono molti sviluppi in corso in React, ma il cambiamento più importante degli ultimi anni è stato il passaggio ai componenti funzionali. I componenti funzionali si affidano agli hook per molte delle loro capacità. L'hook più comune è useState, ma ce ne sono molti altri.

Ecco uno sguardo a otto utili hook React che potresti non conoscere e come usarli.

Tutti conoscono useState perché sostituisce una caratteristica essenziale dei componenti basati su classi, ovvero le variabili membro che mantengono lo stato, con un equivalente funzionale. L'hook useReducer fa qualcosa di simile, ma per scenari più complessi in cui le transizioni di stato sono più coinvolte e l'applicazione trae vantaggio dal rendere esplicite le transizioni. Il gancio useReducer è ispirato ai riduttori presenti in Redux. Può essere visto come una via di mezzo tra la semplicità di useState e la complessità di un sistema di gestione dello stato come Redux.

Ecco un esempio di come lavorare con l'hook useReducer. Puoi anche vedere il riduttore dal vivo in questo JSFiddle.

Lo scopo di questo esempio è prendere il testo dalla casella di input e consentire all'utente di fare clic sui pulsanti per visualizzare il testo tutto in maiuscolo o tutto in minuscolo. Il codice dichiara un nuovo riduttore con const [state, dispatch] = useReducer(reducer, partialState);. useReducer accetta la funzione riduttore e lo stato iniziale e restituisce un array, che poi destrutturiamo in variabili di stato e invio.

Il riduttore stesso è definito con: const riduttore = (stato, azione) =>, fornendo una funzione a due argomenti. Ogni volta che la funzione dispatch viene chiamata nel codice, passerà lo stato corrente insieme a un oggetto azione. In questo caso, l'oggetto azione ha un campo di tipo e lo utilizziamo per determinare come modificare lo stato.

In un'applicazione moderatamente complessa, useReducer può essere utile nella gestione della complessità e può anche essere condiviso nell'applicazione utilizzando il contesto. Quando useState è difficile da gestire a causa della complessità dell'applicazione, l'hook useReducer può essere d'aiuto.

L'hook useCallback è un hook prestazionale. Richiede una funzione e garantisce che solo una singola versione venga restituita e riutilizzata per tutti i chiamanti. Se la funzione è costosa e viene chiamata ripetutamente da un ciclo o da componenti figlio, l'hook useCallback può ottenere miglioramenti significativi in ​​termini di prestazioni. Questo tipo di ottimizzazione è noto come memorizzazione di una funzione.

Nel Listato 2 abbiamo un esempio di utilizzo di useCallback per utilizzare la stessa funzione su più elementi in un elenco. Ecco l'esempio in un JSFiddle dal vivo.

Usiamo React.useCallback() per creare una nuova funzione memorizzata su incrementaCounter. Possiamo utilizzare la funzione memorizzata come una normale funzione nel gestore onClick, nell'elenco. useCallback() accetta una funzione come primo argomento. All'interno di tale funzione, possiamo eseguire qualsiasi lavoro di cui abbiamo bisogno. La differenza fondamentale è che React restituisce semplicemente il valore memorizzato nella cache della funzione a meno che non sia cambiato qualcosa nell'elenco delle variabili di dipendenza, che nel nostro esempio è la variabile contatore.

Si tratta di un potere magico prezioso nei casi in cui è necessario condividere una funzione costosa tra più chiamanti, soprattutto tra i componenti figli. Tieni presente, mentre guardiamo il prossimo hook (useMemo), che useCallback nasconde la funzione stessa. Vale a dire, useCallback impedisce che la funzione effettiva venga ricreata ogni volta che appare e la ricrea solo quando necessario.

L'hook useMemo è il fratello di useCallback. Laddove useCallback memorizza nella cache la funzione, useMemo memorizza nella cache il valore restituito dalla funzione. È una distinzione sottile, ma importante.

Quando dovresti utilizzare useMemo rispetto a useCallback? La risposta è: usa useMemo quando puoi e usa Callback quando devi. L'hook useCallback è meritato quando il calo di prestazioni che si sta evitando è la creazione della funzione stessa nel rendering, mentre useMemo non impedirà alla funzione di essere ricreata ovunque appaia. Tuttavia, useMemo garantirà che la funzione restituisca un valore memorizzato nella cache se le dipendenze non sono cambiate.