Contesto in React

Prima di passare allo studio del prossimo hook, dobbiamo considerare il concetto di contesto in React.

Di solito passavamo i dati dai componenti genitori a quelli figli tramite props. Questo metodo va bene se non hai molti componenti e non devi passare le props dal genitore al componente desiderato attraverso i figli per più di 2-3 volte.

Questo metodo può anche diventare estremamente scomodo e portare a vari problemi, se nei componenti intermedi queste props non vengono affatto utilizzate (un tale problema si chiama prop drilling), o devi passare gli stessi dati a un gran numero di componenti.

In questi casi, il contesto può aiutarci, che permette di rendere i dati del componente genitore disponibili per qualsiasi componente figlio, indipendentemente dalla sua posizione nell'albero dei componenti, senza passarli attraverso le props. Di conseguenza, riceveranno i dati solo i componenti che ne hanno bisogno.

Per utilizzare il contesto, deve essere creato. Per iniziare, creiamo un file MyContext.js e importiamo la funzione createContext:

Ora creiamo l'oggetto contesto, salviamolo in una variabile MyContext, che non dobbiamo dimenticare di esportare. Nel nostro caso, abbiamo impostato in createContext il valore iniziale null, poiché per noi non è fondamentale (avremmo potuto lasciare semplicemente le parentesi vuote). Il valore predefinito apparirà durante la lettura del contesto, se non verranno trovati altri valori. Questo valore può essere di qualsiasi tipo:

Nella prossima lezione creeremo un'applicazione composta da diversi componenti, situati in file separati. Se tutti i componenti fossero in un unico file, allora non avremmo creato un file separato per il contesto e non lo avremmo esportato.

Ora importiamo MyContext.js nel componente vuoto App - nel componente da cui intendiamo trasmettere i dati: