React about React-Context-API

When I was working with React and developing some components in my project, I faced some prop-drilling issues while passing the props down to child components. For example, I have a user component and down to it having a home component and down to it having a profile component and down to it having some profile info component. If I want to get user information in the profile info component, I want to pass the user props to home and then to profile and then to profile info component. It was like passing the information to the people who might not need it. So to overcome this scenario, there are many libraries that came into the picture such as Redux, Flux, etc. Before going to learn these libraries, you should know at least the context API concept.

What is Context? 😀

As stated in the react documentation,

‘Context provides a way to pass data through the component tree without having to pass props down manually at every level.’

Context provides a way to share values between components without having to explicitly pass a prop through every level of the tree. It solves the prop-drilling issue.

How to use Context API? 😕

When I went through some of the tutorials and documentation, and I got confused with the syntax and declaration. So in this blog, I tried to implement the context API concept in the simplest way.

The main goal is to capture the user information in the login component and to use it in the home component without passing user information as props to the home component.

Excited!!… Keep reading!!

Step 1: Create a fresh react project using create-react-app.

Step 2: Create a file named StateProvider.js (use can name it on your own) which acts as a dataLayer throughout the application.

Before going to start the application, you must have a basic understanding of some API’s that we are going to use.

React.createContext()

This API creates the object which is having some default value defined by us. This is up to us whether we would have a default value or not. It provides the two methods that we need to set the value and use the value as defined below.

export const DataLayerContext = createContext()

Context.Provider

<DataLayerContext.Provider value={}>

Provider method allows setting the value that can be used in component

In the DataLayer method, we have to pass the initialState, reducer, and children to update the state of the data layer. Before going to pass the arguments, we have to declare this DataLayer in the application.

Step 3: In the index.js file, import the DataLayer and bind the application using the below-mentioned code.

Step 4: Now we have binded our app using DataLayer, next we have to create initialState and reducer to store the data.

Create a reducer.js file to initiate our state and reducer.

you can create as many states and actions as you want. As of now, we have created a DataLayer and binded this DataLayer in the application, and created our basic initial State and reducer. We cannot update the state directly. So to update the state we have to dispatch some action and it will automatically update the state with that provided information. The next step is to dispatch an action and to update the state.

Step 5: From the component, we can dispatch an action by using the below code.

Hahhhh! that’s it. we have completed and created our first context-API.

If we want that user information in the Home component, with just 2 lines of code, we can get the state and use wherever we want.

By running this code, whenever you logged in by the user name, it will be shown in the home component.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

If you enjoyed this post, don’t forget to give it a 👏🏼, share it with a friend you think might benefit from it, and leave a comment!!

Thanks !!