Контекст у React-у

Пре него што пређемо на изучавање следећег кука, морамо да размотримо концепт контекста у React-у.

Обично смо преносили податке од родитељских компоненти ка дечијим користећи пропсе. Овај начин је добар ако имате мало компоненти и не треба да преносите пропсе од родитељске до жељене компоненте кроз дечје компоненте више од 2-3 пута.

Овај начин такође може постати веома незгодан и довести до различитих проблема, ако се у средњим компонентама ти пропси уопште не користе (овакав проблем се зове prop drilling), или треба да преносите исте податке великом броју компоненти.

У овим случајевима нам може помоћи контекст, који омогућава да подаци родитељске компоненте буду доступни било којој дечијој, без обзира на њен положај у стаблу компоненти, без преношења кроз пропсе. Сходно томе, примаће податке само оне компоненте којима су потребни.

Да бисмо искористили контекст, морамо га креирати. За почетак, направимо фајл MyContext.js и увезимо у њега функцију createContext:

import { createContext } from 'react';

Сада ћемо креирати објекат контекста, записати га у променљиву MyContext, коју не заборавимо да извеземо. У нашем случају, поставили смо у createContext почетну вредност null, јер нам није принципијелно (могло се оставити само празан заграде). Задата подразумевана вредност појавиће се при читању контекста, ако се не пронађе нека друга вредност. Ова вредност може бити било ког типа:

export const MyContext = createContext(null);

У следећој лекцији ћемо креирати апликацију од неколико компоненти, лоцираних у одвојеним фајловима. Да су све компоненте биле у једном фајлу, онда и за креирање контекста не бисмо правили посебан фајл и не бисмо га извозили.

Хајде сада да увеземо MyContext.js у празан компонент App - у онај компонент из кога планирамо преносити податке:

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

Направите фајл MyContext.js и увезите га у празан компонент App, као што је описано у лекцији.