What is React Context API?

React's Context API is a powerful feature for "passing data through" your app effortlessly.

It's perfect for when you need to share information like user preferences, app themes, or any global data across many components.

Why Context API is Used?

The beauty of Context API lies in its ability to eliminate "prop drilling" — that's when you pass props from parent to child to another child and so on, just to get data where it actually needs to be.

With Context API, you can share values directly, making your code cleaner and more maintainable.

Step-by-Step Guide to Using Context API

1. Creating a Context

The first step is always to create your context. This is done with React's createContext() function. It's like creating a channel for your data to flow through.

import React from 'react';


const MyContext = React.createContext();

2. Providing Context to Components

Next, you wrap your components with the Context Provider. This step is crucial as it makes the context available to any child components that need it.

It's like turning on a data faucet at the top of your app.

<MyContext.Provider value={someValue}>
  {/* Components that need access to your context */}
</MyContext.Provider>

3. Consuming Context in Components

To use the context, you can choose between two methods: MyContext.Consumer for class components or the useContext hook for function components.

The useContext hook is the simpler and more modern approach.

import React, { useContext } from 'react';


function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>; // Now you have access to your context value!
}

Practical Example: Sharing a Theme Across Components

Imagine you're building an app where users can switch between a dark and a light theme.

Let's use Context API to make this theme available throughout our app.

Creating a ThemeContext

First, define your context with a default theme.

import React from 'react';


const ThemeContext = React.createContext('light'); // 'light' is the default theme

Providing the ThemeContext

In your main App component, wrap your content in ThemeContext.Provider and pass the current theme as a value. This makes the theme available to any component in the app.

import React from 'react';
import { ThemeContext } from './ThemeContext';
import MyComponent from './MyComponent';


function App() {
  return (
    <ThemeContext.Provider value="dark">
      <MyComponent />
    </ThemeContext.Provider>
  );
}

Consuming the ThemeContext

Anywhere in your app, you can now access the current theme using the useContext hook.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';


function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? 'black' : 'white' }}>Theme is {theme}</div>;
}

By following these steps, you've just made it incredibly easy to manage and share your app's theme across all components!

This guide aims to demystify the React Context API, making it accessible and understandable. Whether you're building a small project or a large-scale application, mastering the Context API will significantly streamline your React development process.