Gli hook React sono apparsi nella versione 16.7.0 alpha e sono funzioni che consentono di utilizzare tutte le funzionalità delle classi React nei componenti funzionali. Possiamo grazie ai ganci sviluppare un'applicazione React composta solo da componenti funzionali. È comunque interessante notare che i componenti funzionali che utilizzano hook sono completamente compatibili con le classi React.
Se vuoi passare agli hook sulla tua applicazione, puoi farlo mentre procedi senza interrompere il resto dell'applicazione. Questi hook consentono, tra le altre cose, di sostituire lo stato ei metodi del ciclo di vita di una classe React. Poiché queste non sono classi, la parola chiave "questo" non è più rilevante nel tuo codice.
Ci sono due regole da sapere quando si usano gli hook:

1. Gli hook vengono chiamati al livello superiore di un componente. Cioè, non puoi chiamarli da una funzione o sottofunzione.
2. Gli hook sono chiamati solo nei componenti funzionali. Non funzioneranno in una classe.

Per aiutarti e guidarti nei tuoi sviluppi, puoi utilizzare ESlint linter grazie alla seguente regola: eslint-plugin-reagire-ganci. 
 

#1 UsaStato

useState è il primo hook che scopriremo. Permette di sostituire il famoso stato di una classe React. È definito con il suo setter su una riga:

cosa abbiamo fatto qui ? 
La funzione useState restituisce una matrice. Questa funzione prende come parametro il valore iniziale desiderato.
Il primo elemento dell'array (nome) è una variabile che dà accesso al valore di stato (qui UX-Republic).
Il secondo elemento (setName) è una funzione che aggiorna lo stato del componente per avere i nuovi valori nel DOM.
L'esempio seguente mostra la trasformazione di una classe React in un componente funzionale utilizzando l'hook useState: 

Diamo un'occhiata al codice :
Non è più necessario il costruttore, la definizione del nome della variabile e del suo setter in useState lo sostituisce. Non troviamo più "questo" nemmeno nel codice per accedere ai dati dei componenti.
Infine, per modificare il valore di 'name' è sufficiente chiamare il setName definito in useState, anche qui è necessario meno codice che con le classi React.
UseState è probabilmente l'hook più semplice offerto da React. 

#2 UsaEffetto

UsaEffetto è il secondo hook che trattiamo in questo articolo.Ti consente di sovrascrivere i metodi del ciclo di vita di una classe React.
All'interno di una classe, i metodi del ciclo di vita vengono attivati ​​(come suggerisce il nome) nelle fasi del ciclo di vita dei componenti. L'uncino useEffect viene attivato principalmente dai dati inviati a questo componente. 
La classe React ci richiede di usare i suoi metodi.
Tuttavia, nello stesso metodo, ad esempio componentWillReceiveProps, a volte si trovano logiche aziendali diverse di un componente. Ciò complica la comprensione dei metodi.
UseEffect offre la possibilità di separare la logica aziendale e semplifica la lettura di un componente. Come fa? Puoi creare tutti i metodi useEffect che desideri in un componente. Torneremo su questo dopo alcuni esempi.

#3 uso di baseEffect

In un primo esempio vedremo come utilizzare useEffect in un semplice componente che modifica il titolo della pagina quando viene cliccato un pulsante. Ecco come sarebbe una classe React che fa questo.

diventa

Vediamo che l'uso di useEffect semplifica il componente e sostituisce i due metodi del ciclo di vita. Questo metodo viene chiamato quando viene avviato il componente. Inoltre, ogni volta che il componente si aggiorna, verrà chiamato il metodo useEffect. Qui non siamo più interessati al ciclo di vita del componente. Si dice solo che con ogni aggiornamento, deve passare il metodo useEffect.

#4 useEffect con effetto cleanup

Ora scopriremo l'effetto di pulizia. È una funzionalità di useEffect che consente di eseguire un'azione quando il componente smontare. Per fare ciò, aggiungi semplicemente un ritorno di una funzione che vuoi eseguire quandosmontare in useEffect.
Ecco un esempio :

Vediamo in queste righe di codice che quando il componente viene inizializzato, ci iscriviamo allo stato di un amico tramite la ChatAPI per sapere se è online o meno. Restituiamo questo risultato usando il metodo handleStatusChange e lo rendiamo nel rendering. Per evitare una perdita di memoria, quandosmontare del componente, noi cancellarsi allo stato del nostro amico tramite la ChatAPI. 
L'effetto cleanup può aiutarci a semplificare questo codice con useEffect :

Qui spostiamo la funzione handleStatusChange in useEffect perché non viene utilizzato al di fuori del suo ambito. Sottoscriviamo lo statuto come durante il componentDidMount. Infine abbiamo aggiunto nel ritorno una funzione pulizia in cui noi cancellarsi dello stato del nostro amico. Ancora una volta ci rialziamo e tutta la logica è raggruppata nello stesso posto.

#5 Fai buon uso di useEffect

Ecco alcuni suggerimenti per l'utilizzo dell'effetto useEffect di React Hooks :

• è megliousa più useEffect per separare la logica e rendere il codice più leggibile. È interessante notare che gli useEffects vengono lanciati nell'ordine in cui sono scritti. 
• le prestazioni possono essere ottimizzate passando gli effetti. useEffect viene avviato ogni volta che il componente viene aggiornato.

A volte vorrai passare useEffect solo se alcuni valori nel tuo componente cambiano. Anziché utilizzare i cicli if nella funzione useEffect per testare l'aggiornamento di determinate variabili, puoi passare come secondo argomento a useEffect un array con le variabili da osservare. Non appena una di queste variabili cambia, verrà chiamata la funzione useEffect.
Ecco un esempio :

Qui abbiamo un ciclo if che non vogliamo trasporre agli hook.

Questa matrice che viene passata come parametro di useEffect contiene i dati che ascolta per avviare il suo codice. Se questi dati cambiano, esegue il suo codice, altrimenti non fa nulla. Puoi vederlo come un metodo willReceiveProps dedicato a determinati oggetti di scena. Nell'esempio sopra, il titolo del documento viene aggiornato quando contare cambia valore.
Per tua informazione, puoi passare un array vuoto a useEffect, in questo caso il codice verrà eseguito solo quando il componente viene creato e non tornerà in esso durante gli aggiornamenti di questo componente.
 

Per andare oltre

Puoi creare i tuoi ganci se lo desideri. Niente di più semplice, basta definire una funzione il cui nome inizia con 'use' e che questa funzione utilizzi hook React. Ci sono già molti hook personalizzati su github.
Se quando si utilizza useState, troviamo che il metodo di inizializzazione della variabile richiede molto tempo, possiamo eseguire facilmente l'inizializzazione pigra. Vale a dire inizializzare la sua variabile in modo asincrono. 
 
Ricorda, useState prende il valore predefinito di una variabile come parametro. Possiamo ritardare l'inizializzazione della variabile definita in useState fino al momento in cui ne abbiamo davvero bisogno passando una funzione come parametro di useState.
Ecco un esempio di implementazione :

Qui, l'inizializzazione del "valore" verrà eseguita in modo asincrono e non influirà sulla velocità di visualizzazione del resto della pagina.
 

Conclusione

Con gli hook puoi eliminare le classi React, la parola chiave this e tutte le righe necessarie per creare un componente (il costruttore, il binding delle funzioni, ecc.). È possibile isolare le diverse logiche coinvolte nello stesso componente e migliorarne la leggibilità. 
Con gli hook personalizzati puoi dividere un componente in più funzioni rispetto alle classi. 
È anche più facile testare il nostro componente perché la logica da testare è localizzata e più facile da capire (perché non è intervallata da altre logiche).
Inoltre, con questa suddivisione, puoi facilmente testare ogni parte senza temere l'impatto sulle altre funzioni.
Personalmente, trovo più logico pensare al tuo componente in base a ciò che riceve come oggetti di scena che in base a un ciclo di vita. Ogni componente può essere ottimizzato evitando di passare attraverso determinati hook. 
Nel complesso abbiamo bisogno di meno righe di codice per ottenere lo stesso risultato mantenendo il codice molto leggibile.
 
biblio : 
https://reactjs.org/docs/hooks-intro.html
https://putaindecode.io/fr/articles/js/react/react-hooks/
https://medium.com/@dan_abramov/making-sense-of-react-h ooks-fdbde8803889
https://medium.freecodecamp.org/an-introduction-to-react-hooks-12843fcd2fd9
https://codeburst.io/react-hooks-in-5-minutes-1180f1aa0449
https://blog.bitsrc.io/understanding-react-hooks-usestate-6627120614ab
 
Valentin Dupetitpre, Artigiano JS @UX-Republic