Context în React

Înainte de a trece la studiul următorului hook, trebuie să analizăm conceptul de context în React.

De obicei, transmiteam date de la componentele părinte la cele copil folosind props. Această metodă este bună dacă aveți puține componente și nu trebuie să treceți props de la părinte la componenta dorită prin componentele copil de mai mult de 2-3 ori.

Această metodă poate deveni, de asemenea, extrem de incomodă și poate duce la diverse probleme, dacă în componentele intermediare aceste props nu sunt folosite deloc (o astfel de problemă se numește prop drilling), sau trebuie să transmiteți aceleași date unui număr mare de componente.

În aceste cazuri, contextul ne poate ajuta, care permite ca datele componentei părinte să fie disponibile pentru orice componentă copil, indiferent de locația sa în arborele de componente, fără a le transmite prin props. În consecință, datele vor fi primite doar de către componentele care au nevoie de ele.

Pentru a folosi contextul, acesta trebuie creat. Pentru început, să creăm fișierul MyContext.js și să importăm în el funcția createContext:

import { createContext } from 'react';

Acum să creăm obiectul de context, să îl scriem în variabila MyContext, pe care nu trebuie să o uităm să o exportăm. În cazul nostru, am setat în createContext valoarea inițială null, deoarece nu este esențială pentru noi (am fi putut lăsa doar paranteze goale). Valoarea implicită setată va apărea la citirea contextului, dacă nu vor fi găsite alte valori. Această valoare poate fi de orice tip:

export const MyContext = createContext(null);

În lecția următoare vom crea o aplicație din mai multe componente, localizate în fișiere separate. Dacă toate componentele ar fi fost într-un singur fișier, atunci nici pentru crearea contextului nu am fi făcut un fișier separat și nu l-am fi exportat.

Acum să importăm MyContext.js în componenta goală App - în componenta din care intentionăm să transmitem date:

import { MyContext } from './MyContext.js';

Creați fișierul MyContext.js și importați-l în componenta goală App, așa cum este descris în lecție.