DEV Community

Cover image for What is Context API in React and how to use it?
Ashutosh Dash
Ashutosh Dash

Posted on

What is Context API in React and how to use it?

N.B. This article requires you to have little knowledge of prop drilling and the issue associated with them.

Context API acts as a container for the global state variables which is helpful when you want to avoid prop drilling and pass data from one component to another without the need for passing props.

Steps to use Context API

Step 1: Create Context

create context

Step 2: Use Context

use context

And that's it. You have successfully implemented Context API.

Overall Code

Overall Code

Final Output:

final output

Thanks for reading this article. I hope it was helpful. Feel free to let me know how I could improve it.
You can connect with me on LinkedIn and Twitter.

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more