React Context

Key concepts to remember

• Context: React's Context allows for efficient sharing of state across components. It provides a mechanism to pass data through the component tree without explicit prop drilling.
• Global State Management: With Context, we can manage the global state effectively. It eliminates the tedious process of passing props through multiple intermediate components, making accessing shared data from any component within the context easier.
• Simplifying Patterns: Context simplifies the implementation of specific patterns in React, such as theme switching or authentication. For example, by using Context, we can easily change the theme of the entire application by updating a single context value, which automatically propagates the changes to all components consuming that context.

Example

Let's create a simple app that displays different sections of text. The primary objective is to dynamically change the app's styles based on the selected theme. We will offer two options: light and dark. Using React Context will ensure that all components know the chosen theme and adapt the colors accordingly.

Step 1

We create the context in the separate context.js file.

Code explanation:

• Line 1: This line imports the createContext function from the "react" package. The createContext function is used to create a new context object in React.
• Line 3: This line creates a new context object called ThemeContext using the createContext function.
• Line 5: This line exports the ThemeContext object as the default export of the module. By doing so, other modules can import and use this context in their components.

Step 2

We build the entire app within the App.jsx file and implement the logic to toggle the colors upon button click. Additionally, we wrap the entire app with the context to ensure that all components have access to the shared data, which, in this case, is the theme.

Code explanation:

• Line 1-6: The code imports the necessary dependencies, including the useEffect and useState hooks, along with the required components and CSS file.
• Line 9-14: The App component initializes the theme state variable and sets up an effect that updates the body background color based on the theme value.
• Line 16-18: The handleButtonClick function toggles the theme between "light" and "dark" when the button is clicked.
• Line 20-27: The JSX return statement renders the components, wrapping them in the ThemeContext.Provider to provide the theme value to the child components.
• Line 30: The App component is exported as the default export, allowing it to be imported and used in other application parts.

Step 3

Next, we proceed to the child components. We will focus on one component in detail since the logic remains the same for all of them. Let's take the Header component as an example. By utilizing the context, we can access the theme value and dynamically adjust the color based on the current theme value.

Code explanation:

• Line 1-3: The code imports necessary dependencies, including React and useContext.
• Line 5-6: The Header component is defined, which uses the useContext hook to access the theme value from the ThemeContext.
• Line 8-17: The JSX markup represents the Header component, where the className of the header element is conditionally set based on the theme value.
• Line 20: TheHeader component is exported as the default export, allowing it to be imported and used in other application parts.

Complete code

To change the theme, please click the Toggle Theme button in the top right corner of the Code Sandbox.