What is React Context?

React context simplifies state management in React applications by providing a mechanism to share data across components without manually drilling props. Instead of passing data step-by-step, Context allows components to access shared values directly, no matter how deeply nested in the component tree. Unlike traditional state management approaches, React context is lightweight and straightforward for specific use cases like themes, authentication, and localization.

Why use React context?

React context addresses a common problem in React—prop drilling. Prop drilling occurs when data needs to be passed through multiple layers of components, even if only the deeply nested components require it. Context provides a solution by offering direct access to the shared state.

How does React context work?

React Context relies on the Context API introduced in React 16.3. It involves three main steps:

1. Creating a context using the createContext method. This method creates a Context object and can optionally include a default value:

2. Using the Provider component to wrap components that need access to the Context. It supplies the data through the value prop.

3. Retrieve data using the useContext hook—a simpler way to consume context values, replacing the older Consumer component:

A practical example of React context

Let's build an app with a React context to switch between light and dark themes. The theme value will be managed using React’s useState hook.

Creating and providing context

We will start with creating a context and providing it to a child component in our application.

Explanation

• Line 1: We import useState and createContext from React.

• Line 4: We use createContext to create a new context object, CustomThemeContext. We provide "light" as the default value. If no <Provider> is found above in the component tree, this value will be used when a component consumes the context.

• Line 7: We declare a state variable called backgroundTheme with an initial value of "light".

• Line 10: The CustomThemeContext.Provider makes the theme value (backgroundTheme) and the updater function (setBackgroundTheme) available to all child components. The value prop passes these two variables as an object {backgroundTheme,setBackgroundTheme}.

• Line 12: ChangeTheme is a child component wrapped within the provider, meaning it will have access to the context values.

Consuming context with the useContexthook

Now, let’s create a component that consumes the theme context and allows users to toggle between themes.

Explanation

• Line 4: We use useContext to access the backgroundTheme and setBackgroundTheme values from CustomThemeContext. Now, the ChangeTheme component has access to both the current theme and the function to change it.

• Lines 6–8: We define a function, changeTheme that checks the current theme, prevTheme. If the theme is "light", it switches it to "dark", and vice versa.

• Lines 11–19: We render a button with an onClick handler that triggers changeTheme when clicked. The button's style dynamically sets the background color based on the current theme. The button text shows the target theme (e.g., “Switch to Dark Theme” if the current theme is light).

Code example

Let's look at a working example by combining everything and executing the application.

React context vs. Redux

Apart from React context, we can also Redux to manage the global state of an application or a feature. Redux is a powerful tool for large-scale state management but comes with more boilerplate.

React context and Redux are popular tools for state management in React applications. While both aim to manage shared states effectively, they cater to different levels of complexity and use cases. Let's look at the differences in the table below.

Advantages of React context

React context offers several benefits, particularly for smaller-scale applications.

1. No need to use external libraries, e.g., Redux, reducing dependencies and simplifying project setup.

2. Context eliminates the need to pass props manually through every component level.

3. Easy to understand and implement, especially with the useContext hook.

4. Works seamlessly with React's rendering model without adding significant overhead.

Limitations of React context

Despite its simplicity, React context has some limitations that may affect its suitability for large-scale applications.

1. Context re-renders all consuming components when the provider’s value changes. This can lead to performance bottlenecks in large trees.

2. Managing a complex state with Context alone can become cumbersome without middleware or advanced tools.

3. Debugging deeply nested components relying on multiple contexts can be challenging without specialized tools.

4. Unlike Redux, React context does not natively support middleware for asynchronous operations or side effects.

Conclusion

React context is a valuable tool for managing the global state in a React application. While it may not replace state management libraries like Redux, its simplicity and integration make it an excellent choice for many use cases. By following best practices and leveraging hooks, you can maximize the potential of React context in your projects.