Context API: The Harder Approach

ever heard about prop drilling or redux, or even specifically context API. if you do then great man but if you felt like nah i am lost here. then hey, you are supposedly🫡 at the right place. A little bit about myself, my name is Tenzin and what I am going to share now is just my little cent about what I have got to know in this journey of web dev.

when we heard the word Context API, it sounds like a rocket science at first sight but when the concepts get clear, it is nothing but a simple approach to eliminate the problem of prob drilling.

so what is props Drilling and why is that the problem. you see back in the days, when react was supposedly new to the world of web dev, there was no concept of context and it state management.

what we use to do is we have a app.jsx file and that is sending a data to a card component. But here is the tricky part, the card component that is going to receive the data is in another component call dashboard and in dashboard there are two side left component and right component. In the right component there are two more component top and bottom and finally inside the top component the card component is there.

So now for card component to get the data send by the app component the props need to be received by the upper component like the dashboard then right one, then the top one then finally the card one.

But the dashboard and the right one and the top one doesn’t need that prop only the card component needed that prop. So that method was highly not optimized.

lost ? haha here is a diagrammatic visual of what i am trying to say in above statement

Without using Context API

Then there was a hunch about making one global file {name: “tenzin”} so only the one who needs that data can go there and access it. No use case of props. The data that is send by the app.jsx is now send as a object not props to that file and other components access it if they need it THIS WAS CALL CONTEXT API

Using Context API

BUT the context Api is only associated with react. Then there is REDUX state management which is associated with many other frameworks. For react the redux used is call react-redux.

There is a easier version of redux which is call redux-toolkit (RTK)

There are basically four steps

1. Creating context

2. Creating the provider

3. Sending the values

4. Receiving the values

Step1: Creating my first Context

Create a file name context and inside that create a file name usercontext.js. inside it declare the context and export it.

The context act as a provider and a wrapper. every component that is wrap around the context has the access to the global context created.

Creating the Context

Step2: Creating the Provider

after the context is created now we have to define the provider and the children to whom we wanted to wrap. so for that we create a new jsx not js file in context folder and put this

Provider Created for the Context

here the children is similar to what we learn about outlet. The components that is wrap in a div is pass as a children

Step3: Sending the Values

now we will see how can we send the data first in the context

create a component like login

Login Components the pass the value name and password

now see here we first create two input where we take name and password where the values are made using the usestate and onchange the new input is set. Now to send the data. When we submit the button it triggers a handlesubmit button, firstly prevent the default behavior. Then with the use of usecontext , destructure the setuser state which was pass from the provider. Then in the function setuser the username and the password.

Step4: Receiving the Values

Now here is the receiver

Profile Component that takes the user from the context and use it prop to give value

so hey if you came this far, you are the chosen one (haha). but thats all it takes to make your first Context API. I know you might have some doubts and that’s normal. even when i first learn about this, i was also in doubts and was not confident about it. but sooner or later, I got to know that, that’s the beauty of learning, especially self-learning and specifically free self learning haha. you need to get in the state of frustration and burn out to truly understand the value of destination that you are going for.. so my friend next to screen, I hope you have a great learning and pushing your self to extra ordinary 🫡