DEV Community

Md Yusuf
Md Yusuf

Posted on

React Context API Overview

The React Context API is a feature that allows you to share state (data) across multiple components without passing props down manually at every level of the component tree. It simplifies state management, especially in large applications where many components need access to the same data.

Key Concepts:

  1. Context Creation: You create a context using React.createContext().
   const MyContext = React.createContext();
Enter fullscreen mode Exit fullscreen mode
  1. Provider: The provider component is used to wrap the part of your app where you want the context to be accessible. It passes down the context value to its children.
   <MyContext.Provider value={someValue}>
     {children}
   </MyContext.Provider>
Enter fullscreen mode Exit fullscreen mode
  1. Consumer: Components that need access to the context can either use the Context.Consumer or the useContext hook (more common in functional components).
   const someValue = useContext(MyContext);
Enter fullscreen mode Exit fullscreen mode

Example Usage:

  1. Create a context:
   const ThemeContext = React.createContext();
Enter fullscreen mode Exit fullscreen mode
  1. Provide the context in a parent component:
   const App = () => {
     const theme = 'dark';

     return (
       <ThemeContext.Provider value={theme}>
         <ChildComponent />
       </ThemeContext.Provider>
     );
   };
Enter fullscreen mode Exit fullscreen mode
  1. Consume the context in a child component:
   const ChildComponent = () => {
     const theme = useContext(ThemeContext);

     return <div>Current theme: {theme}</div>;
   };
Enter fullscreen mode Exit fullscreen mode

When to Use Context API:

  • Global State: Useful for sharing state that needs to be accessed by many components, such as authentication status, themes, or language settings.
  • Avoiding Prop Drilling: Helps avoid passing props through multiple layers of components.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay