Kontekst u React-u

Pre nego što pređemo na učenje sledećeg huka, neophodno je da razmotrimo pojam konteksta u React-u.

Obično smo podatke prosleđivali od roditeljskih komponenti ka podređenim koristeći propose. Ovaj način je dobar ako imate malo komponenti i ne morate da prebacujete propose od roditeljske do željene komponente kroz podređene više od 2-3 puta.

Ovaj način takođe može postati izuzetno nepodesan i dovesti do različitih problema, ako se u međukomponentama ti propsi uopšte ne koriste (takav problem se naziva prop drilling), ili vam je potrebno da prosledite iste podatke velikom broju komponenti.

U ovim slučajevima nam može pomoći kontekst, koji omogućava da podaci roditeljske komponente postanu dostupni bilo kojoj podređenoj, bez obzira na njegov položaj u stabilu komponenti, bez prosleđivanja kroz propose. Prema tome, podatke će prihvatati samo one komponente kojima su potrebni.

Da bismo iskoristili kontekst, moramo ga kreirati. Za početak, kreirajmo fajl MyContext.js i importujmo u njega funkciju createContext:

import { createContext } from 'react';

Sada kreirajmo objekat konteksta, upišimo ga u promenljivu MyContext, koju ne smemo zaboraviti da izvezemo. U našem slučaju, postavili smo u createContext početnu vrednost null, jer nam ona nije od bitnog značaja (moglo je ostaviti samo prazne zagrade). Zadana podrazumevana vrednost će se pojaviti pri čitanju konteksta, ako se ne nađu neke druge. Ova vrednost može biti bilo kog tipa:

export const MyContext = createContext(null);

U sledećoj lekciji ćemo kreirati aplikaciju od nekoliko komponenti, smeštenih u odvojenim fajlovima. Da su sve komponente bile u jednom fajlu, onda ni za kreiranje konteksta ne bismo pravili poseban fajl i ne bismo ga izvozili.

Hajde sada da importujemo MyContext.js u praznu komponentu App - u onu komponentu iz koje nameravamo da prosleđujemo podatke:

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

Kreirajte fajl MyContext.js i importujte ga u praznu komponentu App, kao što je opisano u lekciji.