Guida ai React Hooks — parte 1
Gli Hooks sono stati introdotti durante la React Conf 2018 e ci consentono di utilizzare lo stato, gli “effetti collaterali” e altre funzionalità nei componenti funzionali. Prima i componenti funzionali venivano chiamati componenti funzionali stateless (FSC), ovvero senza stato, ora grazie agli Hooks siamo in grado di usare lo stato e non è più necessario creare un componente di classe per utilizzarlo.
In questo primo articolo voglio spiegare le motivazioni degli Hooks, cosa è cambiato in React con la loro introduzione e come possono essere utilizzati nei componenti funzionali.
Perchè React Hooks?
React non offre un modo per “collegare” comportamenti riutilizzabili ad un componente e, per risolvere questo problema, sono stati introdotti concetti come render props e componenti di ordine superiore. Tutti questi patterns avanzati in React utilizzano i cosiddetti componenti di wrapping che, per essere implementati, richiedono necessariamente la ristrutturazione dei tuoi componenti. Procedura che causa quello che viene definito”The Wrapper Hell”, termine coniato per denotare la visibile confusione che si crea durante l’ispezione dei componenti nel browser usando React DevTools. Quello che viene generato è un albero di componenti illeggibile, perché tutta la logica è coperta da dozzine di altri componenti di React.
Immagino che questo sia stato il motivo principale che ha portato il team di React a introdurre gli Hooks: puoi incapsulare e riutilizzare la logica stateful nelle funzioni come effetti collaterali, senza introdurre altri componenti.
Altra motivazione per cui sono stati introdotti gli Hooks è rappresentata da una curva di apprendimento più fluida per chi si avvicina la prima volta a React; le classi, infatti, costituiscono una grande barriera per l’apprendimento di React.
Con gli Hooks puoi scrivere applicazioni React con solo componenti funzionali, senza la necessità di convertire un componente funzione in un componente di classe per utilizzare i metodi di Lifecycle, al fine di utilizzare gli effetti collaterali o lo stato locale.
Cosa cambia con React Hooks?
Gli Hooks cambieranno il modo in cui scriviamo le applicazioni React in futuro ma, al momento, non cambia nulla. Il team di React continuerà a supportare i componenti di classe e non hanno piani per rimuoverli, quindi è comunque possibile scrivere componenti di classe con lo stato locale e metodi di Lifecycle, etc. Tutto quello che abbiamo imparato in questi anni di React funzionerà ancora.
Mentre aspettiamo che il futuro arrivi, riporto una panoramica degli HooKs più usati:
All’inizio c’era this.setState
La teoria di base in React è che una parte dell’interfaccia utente può “reagire” in risposta ai cambiamenti di stato. La forma per esprimere questo flusso era una classe ES6, i componenti di classe di React.
Nel componente di classe riportato sopra, lo stato interno viene modificato tramite this.setState quando viene cliccato il bottone e il testo nascosto reagisce a turno a questa modifica visualizzandosi o nascondendosi.
Con gli Hooks è possibile esprimere la stessa logica senza una classe ES6.
Hook State (useState)
L’ Hook State viene utilizzato per gestire lo stato locale nei componenti funzionali. Usiamo la funzione useState in questo esempio per gestire una serie di attività. Iniziamo:
La funzione useState, esposta da React stesso, accetta uno stato iniziale come argomento, ovvero i dati che saranno soggetti a modifiche, e restituisce, utilizzando la destrutturazione dell’array, due variabili che possiamo denominare come desideriamo -consiglio di utilizzare nomi di variabili descrittivi e significativi a seconda dello scopo dello stato-. La prima variabile è lo stato corrente, la seconda corrisponde alla funzione utile per aggiornarlo.
Come possiamo aggiungere una nuova attività alla lista todos? Per farlo creiamo un form che al submit aggiunge l’attività, scritta nell’input text, nella lista attraverso la funzione restituita dall’hook useState per aggiornare lo stato.
E’ possibile utilizzare l’Hook State più di una volta in un singolo componente. Nell’esempio definitivo sopra, abbiamo utilizzato un altro useState per salvare il testo inserito nell’input text del form nella variabile value, che utilizzeremo per aggiungere l’attività all’elenco todos.
Hook Effect (useEffect)
Come accennato in precedenza, i componenti funzionali dovrebbero essere in grado di gestire lo stato e gli effetti collaterali tramite gli hooks. La gestione dello stato è stato mostrato con l’hook useState, mentre per gli effetti collaterali, solitamente utilizzati per le interazioni con l’API Browser / DOM o l’API esterne per il recupero dei dati, entra in gioco l’hook useEffect.
Riporto di seguito un esempio dove utilizziamo useEffect per recuperare in modo dinamico la lista di attività per inizializzare lo stato todos. Come API utilizziamo l’utility JSON Placeholder che fornisce diverse API REST per test e prototipi in modo del tutto gratuito.
Introduciamo il nostro effetto collaterale con useEffect che esegue la richiesta tramite la funzione fetchData. La funzione utilizzata per prelevare le attività, registra il risultato nella lista utilizzando l’hook useState setTodos, passandogli il nuovo stato, ovvero una selezione dei primi 10 todos ricevuti come risposta della richiesta effettuata tramite la funzione primitiva fetch.
Tutto sembrava corretto ma, lanciando l’app, questo è quello che ho notato nella console del browser:
Dalla documentazione leggo che l’Hook Effect sostituisce i metodi di Lifecycle componentDidMount, componentDidUpdate e componentWillUnmount dei componenti classe. Quando invochi useEffect, stai sostanzialmente dicendo a React di eseguire la funzione “effetto” dopo aver applicato i cambiamenti al DOM.
Di default, React esegue gli effetti ad ogni renderizzazione, inclusa la prima. Il secondo parametro serve per indicare tutti i valori (come props e state) che cambiano nel tempo e che vengono utilizzati dall’effetto per essere rieseguito. Se vuoi eseguire un effetto una volta (su mount e unmount), puoi passare un array vuoto ( []) come secondo argomento. Questo dice a React che il tuo effetto non dipende da alcun valore da props o state, quindi non ha mai bisogno di essere rieseguito. Chi ha utilizzato i componenti classe, per risolvere questo bug, avrebbe dovuto aggiungere il metodo componentDidUpdate per gestire questo caso.
In useEffect possiamo ritornare una funzione per ripulire l’effetto, funzione che viene eseguita quando il componente viene smontato; questo è l’equivalente del metodo componentWillUnmount per le classi.
Come creare Hooks personalizzati
Esatto, puoi implementare i tuoi React Hooks personalizzati che possono essere riutilizzati nella tua applicazione o da altri. Vediamo come funzionano creandone uno che implementi il recupero dei dati.
Ora tutto è ben incapsulato in un effetto che possiamo estrarre come se fosse un hook personalizzato, che segue la stessa convenzione di denominazione degli altri hooks, il cui nome inizia con use.
Conclusioni
Spero che con questo articolo abbia dato qualche suggerimento per l’utilizzo degli Hooks nei vostri nuovi progetti. Ci sono tantissime risorse al riguardo, ma vi consiglio di consultare le FAQ ufficiali e le regole degli hooks della documentazione ufficiale.
Il codice riportato sopra lo trovate nel mio repository GitHub. Vi condivido anche la sandbox, creata con Codesandbox, dove è possibile vedere il codice in azione e giocarci un pò.
