React JS Context Provider Tutorial

Welcome to our deep dive into the world of React JS Context Provider! This tutorial is designed for both beginners and intermediate learners, and we'll walk you through the Context API step by step. By the end of this lesson, you'll have a solid understanding of how to use Context Provider in your projects.

What is React JS Context Provider?

💡 Pro Tip: React JS Context is a way to share data across components without having to pass props down through every level of the component tree.

In simpler terms, Context Provider is a special type of component that acts as a store for shared state, making it easier to manage global data in large-scale applications.

Why use Context Provider?

📝 Note: Context Provider simplifies the management of global state, reducing the need for multiple layers of components passing props down the tree.

🎯 Key Concept: Context Provider enables components to access and use shared state, even if they are not direct children of the component that holds the state.

Setting up Context Provider

Now that we understand what Context Provider is and why we use it, let's set one up!

First, we need to import the necessary libraries:

javascript

import React, { createContext, useState } from 'react';

Next, we'll create a Context object using createContext:

javascript

const MyContext = createContext();

Now, let's create a ContextProvider component that will hold our shared state:

javascript

const MyContextProvider = (props) => {
  const [sharedState, setSharedState] = useState('initial state');

  return (
    <MyContext.Provider value={{ sharedState, setSharedState }}>
      {props.children}
    </MyContext.Provider>
  );
};

Here, we've created a new component called MyContextProvider, which wraps our application and provides access to the shared state through MyContext.

Using Context Provider

To use our MyContextProvider, we'll wrap our entire application in it:

javascript

ReactDOM.render(
  <MyContextProvider>
    <App />
  </MyContextProvider>,
  document.getElementById('root')
);

Now, any component within the MyContextProvider can access the shared state using MyContext.

Accessing Shared State

To access the shared state, we'll use MyContext.Consumer or the newer, more concise useContext hook:

javascript

import React, { useContext } from 'react';

const MyComponent = () => {
  const sharedState = useContext(MyContext);

  return <div>{sharedState}</div>;
};

Advanced Example: Using Context Provider with Multiple Components

In our advanced example, we'll create a simple counter application that allows multiple components to access and manipulate the shared state:

javascript

import React, { createContext, useState } from 'react';

const MyContext = createContext();

const MyContextProvider = (props) => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      {props.children}
    </MyContext.Provider>
  );
};

const CounterDisplay = () => {
  const { count } = useContext(MyContext);

  return <div>{count}</div>;
};

const IncrementButton = () => {
  const { setCount } = useContext(MyContext);

  const handleClick = () => setCount(count + 1);

  return <button onClick={handleClick}>Increment</button>;
};

const DecrementButton = () => {
  const { setCount } = useContext(MyContext);

  const handleClick = () => setCount(count - 1);

  return <button onClick={handleClick}>Decrement</button>;
};

const App = () => (
  <MyContextProvider>
    <CounterDisplay />
    <IncrementButton />
    <DecrementButton />
  </MyContextProvider>
);

export default App;

Quiz

With this lesson, you now have a solid understanding of the Context Provider in React JS. You can use this powerful tool to manage global state effectively in your applications. Happy coding! 🎉🎯