REACT NATIVE: Create context() Use context()

In questa breve guida vedremo un semplice modo per utilizzare i due hook forniti da React createContext( ) useContext( ).

Quando usarli

Prendiamo l’esempio in cui abbiamo un componente genitore che detiene la business logic e una serie di figli ‘presentational’ che hanno bisogno di accedere allo stato del padre per presentarlo e per l’interazione con l’utente.

Abbiamo, quindi:

Un componente <Parent /> che gestisce gli stati e li distribuisce a un componente <ChildA /> che, a sua volta, deve distribuirli di nuovo ai suoi figli e così via. Ci sono componenti intermedi che devono ereditare stati solo per passarli ai propri figli (e questi componenti subiranno dei render inutili ogni volta che queste proprietà cambieranno). Siamo quindi di fronte ad un problema di prop drilling.

createContext( )

Per questo ci viene in aiuto il Context di React come riportato nella documentazione ufficiale:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
https://it.reactjs.org/docs/context.html
Non è stato fornito nessun testo alternativo per questa immagine

Successivamente wrappiamo il componente Padre con il context appena creato per far si che tutti i componenti figli possano accedere al context.

Non è stato fornito nessun testo alternativo per questa immagine

Come possiamo notare abbiamo wrappato il componente Parent.js con <MyContext.Proveder > e alla prop value passiamo i dati che vogliamo rendere accessibili tramite il context. In questo semplice esempio passiamo uno stato e il suo setter.

A questo punto vogliamo semplicemente che ChildA visualizzi il value mentre il ChildB cambi quel valore.

useContext( )

Per accedere a value e setValue utilizziamo l’hook useContext( ) come nel seguente esempio:

Non è stato fornito nessun testo alternativo per questa immagine

Come parametro del hook useContext passiamo il contesto a cui vogliamo accedere e, tramite destructuring, recuperiamo il value.

Eseguiamo la stessa operazione per il setValue nel componente ChildB:

Non è stato fornito nessun testo alternativo per questa immagine

Conclusioni

Questo è un metodo molto semplice per utilizzare la Context API; tuttavia context offre molte altre funzionalità che permettono anche di utilizzare reducer e dispatching di azioni come nel pattern Redux. In conclusione, quindi, le Context API sono perfette quando la problematica è legata ad una parte dell’applicazione in cui dobbiamo condividere lo stato tra genitori, figlio e nipoti. Invece, in applicazioni di medie-grandi dimensioni, in cui abbiamo necessità di condividere lo stato tra parti diverse dell’app allora diventa complesso gestire il tutto tramite context e forse è il caso di utilizzare Redux.