I React Hook hanno fatto la loro comparsa a partire dalla versione 16.8. Consentono di utilizzare lo stato ed altre funzionalità di React senza dover scrivere un componente React class. Con l’introduzionedegli Hooks si è pensato inizialmente che l’utilizzo delle React class diventasse a breve obsoleto: in realtà non è così. In realtà rappresentano un modo immediato per poter utilizzare funzionalità intrinseche di React, come ad esempio lo stato dei componenti, l’accesso alle props ed ai context.
Gli Hooks sono di fatto delle funzioni scritte in Javascript, ma per il loro corretto utilizzo è necessario tenere in considerazione due regole fondamentali, come riportato sul portale di react.
“Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple seState and useEffect calls.”
“Don’t call Hooks from regular JavaScript functions. Instead, you can:
– Call Hooks from React function components.
– Call Hooks from custom Hooks (we’ll learn about them on the next page).
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.”
Di seguito un elenco degli Hooks piu’ utilizzati.
useState
Lo stato di un componente React nel modello React class viene solitamente gestito utilizzando this.setState.
Utilizzando gli Hook è possibile importare la reference dell’hook useState :
import { useState } from ‘react’
e successivamente definire all’interno del componente un’istruzione del tipo :
const [hello, setHello] = useState(0)
che definire una funziona setHello (che accetta in ingresso un intero) e la assocerà all’interno della variabile hello. Il valore predefinito della variabile hello è 0, impostato utilizzando useState(0). Ovviamente la varibile hello sarà visibile all’interno del componente. In pratica useState è un Hook che consente di gestire in maniera lo stato all’interno di un componente.
useEffect
useEffect consente di gestire il ciclo di vita dei componenti. In particolare per ottere lo stesso comportamento di componentDidMount è possibile utilizzare:
useEffect(() => {
//codice da eseguire
}, [])Nell’esempio il primo parametro è la callback che deve essere chiamata (inserire all’interno della funzione le operazioni che dovranno essere eseguite), ed il secondo parametro l’array delle dipedenze.
Nel caso in cui l’array sia vuoto lo state e le props hanno il loro valore iniziale. Inoltre, anche se il comportamento può essere considerato simile a componentDidMount, esiste una differenza sostanziale.
A differenza di componentDidMount e componentDidUpdate, la funzione di callback viene chiamata soltato dopo le operazioni di paint e layout all’interndo di un evento deferred. Questo tipo di approccio normalmente non comporta problemi particolari in quanto le funzioni non dovrebbero essere bloccanti all’interno dei browser.
Ci potrebbero essere dei casi in cui le operazioni non possono essere deferred, e gli eventi dovrebbero essere eseguiti in maniera sincrona: per questo motivo react mette a disposizione un hook chiamato useLayoutEffect.
Per poter eseguire la funzione di callback in maniera condizionale, è possibile definire all’interno dell’array le variabili che dovranno essere “monitorate”.
useEffect(() => {
// Quando vengono passate delle dipendenze all'interno dell'array di dipendente
// la funzione di callback verrà eseguita quando una delle dipendenze cambierà
}, [dependencyA, dependencyB])Considerando il ciclo di vita di una classe React, si può facilmente notare come useEffect assuma lo stesso comportamento di componentDidMount, componentDidUpdate e componentWillUnmount.
In un prossimo post vedremo l’utilizzo di memo, useMemo e di useCallback.
Memo viene utilizzato per memorizzare il render di un interno componente, mentre useMemo consente di memorizzare uno o più valori. useCallback viene utilizzto per memorizzare intere funzioni.