Context API with React with Functional Components

Use React Context API with hooks

Photo by Hassan Pasha on Unsplash

Now We will learn about Context API in React and how to use it, to build a React Application

What is Context API

Context API enables way to pass data through the component tree without passing props down manually at each and every level of components.

If you’ve some basic level of experience with react, you will know that passing data via props becomes very inconvenient ,When the props are going to be used by many other components within the project and you have to pass the props down the component tree in detailed manner.

Some components may have to receive the props only to pass it down to its children. We call it as Props Drilling. It makes complexity to your project and it becomes pathetic to manage when the project is getting larger .

By Using Context API in our Project, we avoid passing props through components who don’t even need the data from props.

How to Implement in Application

We can use create-react-app or npx create-react-app app-name

we build a simple application that enables to add a user to the list of users and also delete user.

We can see components we are using Users.js, UsersList.js, AddUser.js along with App.js. Lets know how they were used. You can also find context.js which we are going to explore.

create a context in react

We will create context in contextAPI.js file

import { createContext } from 'react';
export const AppContext = createContext()

App.js

You cansee that on line 8: const [ users, setUsers ] = useState(userList);
I am using the useState hook to store the list of users.

line 10–21 →dispatchUserEvent(actionType, payload) is a function that receives an actionType(example: ‘ADD_USER’, ‘REMOVE_USER’) and a payload (the actual content) that will add or removed users from the state as seen above.

line 24–29 → in the return block I am doing<AppContext.Provider value={{ users, dispatchUserEvent }}>

The value attribute in the AppContext.Provider tag is the data that is made available to <AddUser /> and <UserList /> components.
This means that in the <AddUser /> and <UserList />and all their children components, we have access to the list of users and can also dispatch events to add or remove a user.

Let’s now see how we will get and render the list of users from the context in our UserList.js component.

UserList.js

line 6 → Since we are using functional components, we are using the useContext hook which is made available to us by react as seen here

const { users } = useContext(AppContext);

You should notice how we are passing the AppContext in the useContext hook and also how we are destructuring only the users from the context since we want to render the list of users with this component.

We display the users using a map and render the User.js component for Each user.

Users.js

on line 12–16 → we display the user info (ie, name, age, and bio)

on line 5 → we get the dispatchUserEvent from the context.

And on line 7–9 → we dispatch a REMOVE_USER event with the userId as the payload for the button click on line 18. This means each time the button is clicked it will dispatch an event to remove a user from the state using the user’s id.
remember the dispatchUserEvent function?

AddUser.js

So here also we have access to the dispatchUserEvent from the Context. const { dispatchUserEvent } = useContext(AppContext);

on line 6–8 → am using useState to keep track of the data coming from the input fields.
And the function handleAddUser() adds the user to the list by dispatching a ‘ADD_USER’ action on button click and passing the user data as payload.

Before Using Context API

Context is mainly used when some data needs to be shared by many components at different nesting levels and you want to avoid passing props down the tree. And maintain global store.

Thank you for reading…,