Posted on Oct 15 What is Context?At its core, Context is a way to share data between components without explicitly drilling through components props. It's a global state management system within your React application.When to use Context?You should consider using Context Api when you have data or Settings that need to be accessed by multiple components at different levels of your Application's component hierarchy. This may be applied to features like User Authentication, theme preference, language settings etc.ImplementationTo understand clearly how the Context API works, We'll create a simple Theme functionality that is commonly used in many React Applications.Let's go through the steps of implementing the Context API:1. Create A contextCreate a folder store in your src directory and inside create a file called: ThemeContext.js and import the necessary dependencies:import React, { createContext, useState } from 'react'We'll create and export a theme Context that we'll use to share data across our Application.2. Provide the ContextAfter creating the context, we now have to create a Provider. This is a typical component that wraps the portion of your application where you want to make certain data available to other components. In our case, we'll wrap our Provider in index.js as we want the Theme context to be accessed globally.To create a Provider, we'll simply create a react component and name it ThemeProvider. We then pass props to the component named children.In the provider, we initialize a state variable and set it to false:Create a function toggleTheme that will update the state every time its called.3. Consume the ContextTo consume the Context, return the provider with the data you want to share with other components and wrap the children props inside.And there you go! You've created a context API in React.4. Using the Context In the AppTo be able to access the data in the Context API, we will have to wrap the portion of our Application with the ThemeProvider for the components to consume the data. So we'll wrap the App component with the Provider.Open your index.js file, import the ThemeProvider and Wrap the App component with it.Here's how the index.js file should look:With this setup, we can access the data throughout the entire application.5. Use Case 1In the src directory, create aButton.jsfile and inside import the following dependencies:Make sure you have App.cssin the same folder for styling the button.Create a React component called Button and add a button element to it:Import the data from isDarkTheme and toggleTheme from ThemeContext API.Now that we have accessed the data, we can apply it to our button element. We'll add the onClick event to the button and some styling.6. Use Case 2Open App.js and add the following dependencies:Inside the App component, import isDarkTheme from the ThemeContext API.return a div component with the following:Here's how the entire file looks:Finally, open App.css and paste the following styles. You can modify them to suit your specific needs.Run the AppWhen you run the App in the browser, the theme will change on each button click demonstrating that the data is being shared between the Button component as well as in the App component.ConclusionIn this article, we explored the concept of using Context API to efficiently share data between components while avoiding prop drilling. To help you understand how the Context API works, we implemented a simple functionality that is commonly used in many React Applications and verified that we were able to share global state across your application.GitHub RepoJoin our community by subscribing to the newsletter to receive regular updates, fresh insights, and exclusive content.Let's Connect:LinkedInTwitterInstagramFacebookWebsiteTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Swayam Debata - Sep 17 Alex - Oct 9 Shrihari - Sep 18 Satyam Anand - Oct 9 Once suspended, luqmanshaban will not be able to comment or publish posts until their suspension is removed. Once unsuspended, luqmanshaban will be able to comment and publish posts again. Once unpublished, all posts by luqmanshaban will become hidden and only accessible to themselves. If luqmanshaban is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Luqman Shaban. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag luqmanshaban: luqmanshaban consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging luqmanshaban will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.