image from codesource.io

Context Api is a relatively new concept as a way to manage states and distribute properties on that state to components.

Does this sound familiar?

A little bit yeah, this sounds a lot like what redux does, however, the difference between the both is that context api is a lot less complicated to use, but then again not fully worked out yet as opposed to the Redux.

An example of this, is evident in the fact that users of Context Api do not have access to middlewares or middleware-like libraries kind of like Redux middlewares ( like Redux thunk or Redux Sagas, both of which you can read about in previous blog posts ) that redux enables us to use in our application.

Let’s get right into it.

using states with context APIs in our application

import React, { createContext } from ‘ react ‘ ;

const ExampleContext = createContext({
    example: true

})

export default ExampleContext;

explanation

In the example above, we create a new file, where we instantiate a piece of state in the component ExampleContext. In which the value of the example property is a boolean.

There are two ways we can use the ExampleContext component ( where we put a piece of our state is ), in our application.

Notice how I keep saying ‘ a piece of state ‘ as different components can have different instances of ExampleContext component, but with different values of the properties in the states and of course, different names.

method 1

The first step of ‘ consuming ‘ the state is stated below.

import React from ‘ react ‘;
import ExampleContext from ‘./example-context ‘ ;

const ExamplePage = () => {

return(
<ExampleContext.Consumer>
{
     example => (
           example? <div> example </div> : null
)
</ExampleContext.Consumer>

)

explanation

In the example above we wrap the ExampleContext around the part of the component that wants to utilize the state.

Notice how there is a .Consumer after the ExampleContext, this enables whatever its wrapped around use the property instantiated in it as the state.

This returns a function with a function with the parameter example ( that we get from our ExampleContext.Consumer) that gets passed into it, which enables us to conditionally render the div, using a terinary operator.

method 2

A much simpler method however, would be to use the useContext hook.

import React, { useContext } from ‘ react ‘;
import ExampleContext from ‘./example-context ‘ ;

const ExamplePage = () => {
const example = useContext( ExampleContext );

return(
{ 
     example ? <div> example </div> : null
}
)};

We pass as a parameter into the useContext the ExampleContext component containing our state, and as easy as that we are able to use our example( property ) in our component.

what if we changed the state?

In both examples we use context api to deliver a static state to a component, but what if we wanted to pass a state that dynamically changes?

import ExampleContext from ‘./example-context ‘ ;
import ExamplePage from ‘./example-page ‘ ;

class App extends React.Component{
     constructor(){
         super();

     this.state = {
        example: true
    }
}
render(){
    return(
<div>
     <button onClick={ () => this.setState({ example : false }) > Click here </button >
    <ExampleContext.Provider  value = { this.state.example }>
        <ExamplePage />
  </ExampleContext.Provider>

</div>
);
}}

explanation

A lot of the things written above might be familiar to you, as we have a component state, an example property set to the same value as it was in the ExampleContext. We change the state, using this.setState depending on when the button is clicked.

What might not be familiar to you however would be the ExampleContext.Provider which we wrapped around the ExamplePage component ( the same component we explored in the earlier examples ).

The ExampleContext.Provider, gets passed the property, ‘ value ‘ , whose value is the state instantiated in the component. It then passes it to the ExamplePage component, which re-renders each time the value property changes.

If not wrapped around the component that needs the dynamically changing state( in this case the ExamplePage component ), the component, after utilizing the .Consumer, or the useContext hook, would only have access to the first value ( in this case, example: true ), even after the button has been clicked.

conclusion

In as much as there are some disadvantages ( like the middlewares ), and in the fact, as you may have noticed, that we end up using component state, the context api is a lot easier to use, and still a relatively new concept ( and therefore still developing ).

One might opt for context APIs in smaller projects, and Redux for larger projects. The ball, as it has always been, is in your court.

Thank you for reading, and happy coding!