What is Context API in React and How does it Work?

You need to know that API Context is available since the 16.3+ version, has a hook called useContext, one of the main characteristics is that you can pass the state or functions from the main or parent component to their child’s, without the necessity of pass for each component, also you can update the state from the child.

Props are Obsolete?

The answer for this question is NO, the props are still used a lot, that’s how React are designed and the 90% of the React applications are created. If the project is an easy one props perhaps is a better option than Context, another thing about context is that makes reuse of components a bit more complicated.

How Context API Works? — Example

First it’s recommended to create a folder called context and types inside the src folder, this is optional but you can have more order in your project, inside the context folder you are gonna create 3 files:

• nameContext.jsx
• nameReducer.jsx
• nameState.jsx

And inside the types folder you are gonna create a index.js, and in this index you are gonna create all your types to define the name(just the name) of actions that are gonna modified the state, you are gonna use the following syntax:

export const TYPE_NAME = 'TYPE_NAME';

Ex:

In the nombreContext.jsx:

Ex:

Now in the nameState.jsx:

Ex:

Then, in the nombreReducer.jsx:

Ex:

But this isn’t gonna function if you didn’t add the State for the whole application, you need to added in the App.jsx, this state is the return of your nameState.jsx so first you need to import your state:

import NameState from "./context/nameState";

Then you need to surround all the content that is inside of the return with your state component:

return (
    <NameState>
        ///Here are the components of your app
    </NameState>
)

Now, How Can I Access to the Global State?

Now you have all the structure of the Context API, you have the types that named the actions, the functions that are gonna call the action and the reducer that is that file where the state is modified, but now that you have all of them how can you access to the state that you create in the nameState.jsx?

It’s the time for use the hook useContext, you need to be in the component that you wanna get the state, then you are gonna import the hook useContext and your Context:

import {useContext} from 'react';  
import { nameContext } from '../context/nameContext';

Finally, in the body of your component you need to use the following syntax to get the state:

/**/ : Here the states or functions that you want
const {/**/} = useContext(nameContext);

All this process it could be difficult to understand at the first time but with the practice it will become more easy and the advantage of make all this process is because once you have it, is very easy to change or add a new state that it will be available in the whole app and also using this method to manipulate the state will allow you to have a scalable app.