Sharing State Across Components with Context

Context in React is a powerful feature that enables data sharing between components without the need for explicit prop passing at every level of the component tree. Using Context, we can propagate data down the component hierarchy, making it easily accessible to any component, regardless of its position in the tree.

Note

To get started, let's delve into the syntax. We'll provide a step-by-step guide, ensuring that you grasp each concept along the way. Applying context demands specific code implementation at various component levels. Once we thoroughly cover the syntax, we'll dive into practical example.

Syntax:

1st step: We create a new Context using createContext() function from the React library and assign it to a variable. We should do it at the top level of the application. Typically, we do it in a separate file (e.g., context.js). It will be responsible for the Context object.

context.js

js
Copiar código
9
1
2
3
4
5
6
7
import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

2nd step: In the App file, we wrap all the components that need access to the shared data with the Provider component from the created Context. The Provider component allows us to define the value of the context and make it available to all the child components that consume that context.

App.jsx

jsx
Copiar código
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

3rd step: In the App file, we must also provide the context data. We achieve this by using the value prop for the Context.Provider component. We assign all the data required to the value prop.

App.jsx

jsx
Copiar código
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

4th step: In the child components (ChildCompOne or ChildCompTwo), we can access the shared data using the useContext hook. To use the useContext hook, we must pass the created Context from the context.js file as its argument.

ChildCompOne.jsx

jsx
Copiar código
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Full app code:

Note

Please take a moment to review each step, opening each file and folder, to ensure you clearly understand the process. The next chapter will proceed with an example combining Context and hooks. This will allow you to see how these concepts work together in practice.