[WP] 12.05.2023 | react-context

 

   fig 1.1 react-context scheme

---------------------------------------------------------------------

    One of the way of sharing/transporting data between react components is context. In comparison to props drilling it doesn’t require you to pass the data through all of components until you reach the desired one. Context allow you to describe the data in single place and get it in another. Lets look into how we can apply context to our react app…

At first it is good to create /contexts folder in as a subfolder to /src folder. This will be location of all of the future contexts as there can be more than one context per app. The next step is to create the .jsx / .tsx file and create an instance of context by assigning a createContext() function call to a variable. createContext function require to pass defult value of the context which will be used in case user will not specify the context value.. Please be advised that it should be done out of the function component – in module scope. Finally make sure that your newly created context instance will be visible to other modules by using export keyword. (export const ContextName = createContext()).

EDIT: Instead of importing a context each time you want to access data you can create a customHook and call useContextHook there.

Secondly we will make sure that our context will be posible to use throughout the application with all required data included. For this reason we need to create Provider component. It will hold all the data we want to include in context within its body. We need to return a special <ContextName.Provider></ContextName.Provider> compontent. Moreover it requires to additonal pieces of code. As ContextNameProvider component will be used as a wrapper   {children} must be specified within its props and returned between provider tags as follows: <ContextName.Provider>{children}</ContextName.provider>. Whatever will be passed to value attribute of the provider may be accessed within wrapped components. Finally import created provider in App component and wrap arround the components you wish to provide with created context. You may narrow down the range of the context to any part of component tree (eg form, specified Page).

Thirdly the context may be consumed in two short steps. Step one : import created context (in this case ContextName variable). Step two destructure object passed by context. Context value can be accessed by calling useContext() hook and passing a context name as a parameter – eg const {firstPassedValue, secondPassedValue} = useContext(ContextName).

EDIT: if you wrapped useContext () call within custom hook all you need to do is to call customHook within component and extract required data.

React context api is a good alternative for props drilling. It reduces amount of components involved in passing data from one place to another, What is more it is a feature built in basic react library – no third-party libraries required. Comparing to redux- state management using context require far less code to be implemented. Context provider component may be used to pass additional props which cannot be included within context value. 

Last but not least with great power comes great responsibility – each time context value changes - all components which contain useContext ()/ customHook() call will be re-rendered. The issue may be addressed with memoization techniques such as React.memo. Components wrapped with React.memo call will become pure components. The won’t be re-rendered unless any state or context value they use changes.

Cheers

g-marcin