Using Context API in react app

29 June 2021

What is a context API?

The Context API is a structure component that enables React to handle states at all stages of your application. It acts as a redux which allows you to use context and prevent your application from using third party libraries. Our context needs to be established and we only need to pass on the context values via the provider for our react application.

Why do we need this new Context API?

We need to use such memory management artefacts for small-scale applications to handle data in the software. Since we use the component tree structure to maintain the states and pass on the unidirectional hierarchy props from parent to children, we need to use the context API to handle the application’s data. By following the code structure with a small example increment counter, you can set up the context API.

How to use context API in React app?

Provider: Every Context object comes with a provider React component that allows intense elements to subscribe context changes

context: When React renders a part that subscribes to {the current} Context object it’ll scan the current context price from the closest matching supplier on top of it within the tree known as createContext()

Structure context.js

In the above code, We created the Context with createContext and with contextHandler Provider we wrapped out children’s props to the context provider. We need to set the state in value props on contextHandler Provide in which we are managing our data. Let’s write out the APP.js file.

Now we will wrap our app with the context provider that we created in the context component. By using useContext we can set the initial state of the value with context’s initial state that we created in the context component.

Now you have seen that we are maintaining the value state with Context. Now we are left with adding the functionality to increment the value that affects directly to context text.
And Now, You will see useContext how we will setValue on click of the increment button.

Here we have added a new event handler incrementValue() on click of the button we increment the context previous value with +1 and update the value in global state using Context.

By this example we can learn how we can work with context and manage the states throughout the application.