Reagire agganci e contesto

Gli hook ci forniscono un modo semplice per archiviare i dati, aggiornarli e anche per eseguire diverse funzioni quando ne abbiamo bisogno. Durante la ricerca del modo migliore per archiviare i token utente in un progetto recente, ho riscontrato un problema in cui volevo archiviare un token utente in memoria. Per archiviare e condividere quel token ho dovuto usare il contesto di React per garantire che i dati persistano e si agganciano per mantenere le importazioni al minimo e accedere a quei dati. Ma prima c'erano alcuni problemi da affrontare.

I dati non persistono negli hook

Quando un hook viene chiamato nel codice React, crea istanze separate dell'hook. Nell'esempio seguente abbiamo un piccolo programma in cui ComponentOne utilizza l'hook per visualizzare i dati e ComponentTwo ha aggiornato i dati. Quando eseguiamo questo codice, il componente uno visualizzerà "questi sono i dati" mentre il componente due visualizzerà "questi sono anche i dati". È possibile visualizzare il codice in esecuzione qui .

Per garantire che il nostro hook utente possa archiviare e condividere in modo efficiente i dati di utilizzo, utilizzeremo una funzione React chiamata createContext.

Memorizzazione dello stato nel contesto

Il contesto è progettato per condividere dati che possono essere considerati "globali" per un albero di componenti di React, come l'utente autenticato corrente, il tema o la lingua preferita. Nell'esempio seguente creeremo un contesto che memorizzi un nome utente. Puoi vedere il codice in esecuzione qui .

Quando si eseguono entrambi i componenti, entrambi ora rendono il nome "Santa". Questo perché abbiamo impostato un "fornitore". Ogni oggetto di contesto ha un provider. Il provider prenderà sempre un valore prop, in questo caso abbiamo passato un oggetto con il nome utente e un metodo chiamato set username. Ora, quando chiamiamo il nostro contesto d'uso, ci viene assegnato un oggetto con quei valori.

Miglioramenti con ganci personalizzati

C'è un piccolo problema con il codice sopra che possiamo risolvere tramite l'uso di hook personalizzati. In una piccola applicazione come questa va bene, tutto il nostro codice è locale e facile da usare. Ma in un'applicazione più grande dovremo definire due importazioni ogni volta che vogliamo usare AuthContext. Dovremo importare useContext da React e AuthContext dal nostro codice.

Invece di fare ciò, possiamo avere un'importazione costruendo un hook personalizzato. Puoi vedere il codice live qui .

Invece di due importazioni, ora possiamo semplicemente importare il nostro hook useAuth che ci dà accesso a tutti i metodi e le proprietà che esistono su AuthContext.

Conclusione

Non esiste un modo giusto o sbagliato per utilizzare Hooks, Context o qualsiasi altra funzionalità fornita da librerie come React. Si tratta di capire cosa funziona meglio nel tuo caso. Spero che questo esempio abbia aiutato la tua comprensione della condivisione dello stato con gli hook.