What is Context in React?

Context in React is like a magic messenger that lets different parts of your app talk to each other without much hassle. It's like having a central information hub where data can be stored and accessed by any component, making your app more organised and efficient. 

Have you ever wondered how different parts of a React app share information effortlessly? That's where Context in React comes into play. It's like a passage that lets data flow between components without any hassles. This way, your app can stay well-connected and organised, making development a breeze. 

This blog will contain the basics of creating Context in React, pros and cons, use cases, the problem it solves, etc. Read more for a better understanding.  

Table of Contents 

1) How to create Context in React? 

2)  Pros and cons of using Context 

3) The problem Context solves 

4) Use cases for Context 

5) Conclusion 

How to create Context in React? 

Creating a Context in React is a fundamental aspect of state management, enabling data sharing between components without the need to pass it explicitly through props. While Context is useful for managing state, React Redux provides a more scalable solution for complex applications. Here's a step-by-step guide on how to create a Context in React.

Import React and create Context: Start by importing React and creating your Context using the createContext function. You can name your Context according to the data you intend to share. For example: 

import React, { createContext } from 'react';  

const MyContext = createContext(); 

Create a provider component: To provide data through the Context, you need to create a Provider component. This component will wrap your entire application and make the shared data accessible to all child components. You can create a functional component for this purpose: 

function MyProvider({ children }) { 

  // Define the data you want to share within the Provider 

  const sharedData = 'This is shared data'; 

  return ( 

    <MyContext.Provider value={sharedData}> 

      {children} 

    MyContext.Provider> 

  ); 

} 

Wrap your application: Wrap your entire React application or a specific part of it with the MyProvider component you created. This is typically done in your main App.js or a similar top-level component: 

function App() { 

  return ( 

    <MyProvider> 

      {/* Your application components */} 

    MyProvider> 

  ); 

}  

export default App; 

Create a consumer component (optional): To access the shared data in your child components, you can create a Consumer component or use the useContext hook. Here's how to use the Consumer component: 

function MyComponent() { 

  return ( 

    <MyContext.Consumer> 

      {sharedData => ( 

      )} 

    MyContext.Consumer> 

  ); 

} 

Use useContext hook (Optional): An alternative to the Consumer component is the useContext hook. This hook allows you to access the context directly in functional components: 

import { useContext } from 'react';  

function MyComponent() { 

  const sharedData = useContext(MyContext); 

  return (    

  ); 

} 

With these steps, you've created a context in React. 



 

Pros and cons of using Context 

Let’s discuss the pros and cons of using Context in React.  

Pros of Context in React 

There are many advantages of using Context in React and some of them are discussed below: 

a) Simplifies sharing data: Context makes it super easy to share information across different parts of your app. You don't have to pass data through a long chain of components.  

b) Reduces prop drilling: Prop drilling is when you pass data through several layers of components. Context helps you avoid this, keeping your code cleaner and more organised.  

c) Global data access: With Context, you can create global data that can be accessed by any component, regardless of where it is in the component tree.  

d) Improves code maintainability: It's a great tool for keeping your codebase neat and manageable, especially as your app grows. 

e) Eases development: Context simplifies the process of developing and adding new features to your app. You don't need to worry about passing data between various components, which can save you a lot of time and effort.  

f) Enhances readability: When you use Context, it's easier to understand your code. You can see how and where data is being used across the app without digging through numerous props. 

Unlock the world of web development with our Introduction to HTML Course. Sign up now and start building your digital dreams today! 

Cons of Context in React 

Along with its good side, there are some drawbacks of using Context, which are discussed below: 

a) Performance impact: Context can be less performant when dealing with frequent updates to the shared data. This is because any change in the Context will cause all components using that Context to re-render. In some cases, this may not be efficient.  

b) Limited to class components: In the past, Context was primarily designed for use with class components. While it can be used with functional components, it was not as efficient. This has improved with the introduction of the useContext hook, but it's still worth considering when working with older codebases.  

c) Complexity in testing: When you use Context extensively, testing your components can become more complex. It may require setting up and tearing down Context providers and consumers in your tests, which can be cumbersome. 

d) Learning curve: Understanding and using Context effectively can be challenging for beginners. It involves learning new concepts and can lead to errors if not used correctly.  

e) Limited to React: Context is specific to React, so if you plan to switch to a different framework or library, you may need to refactor parts of your code that rely heavily on Context.  

f) Not suitable for Server-Side Rendering (SSR): If you're building a server-rendered React app, using Context for some global state might not work as expected. It's not optimised for server-side rendering scenarios. 

The problem Context solves 

When you're building a complex web application with React, you often have various components that need to share information or data with each other. Imagine you have a top-level component that contains important data, and you need to pass this data to a deeply nested component several levels down in your component tree. 

Here's the problem: You could pass this data down as "props," which are like messages that you hand off from one component to another. Suppose if you have many levels of components in between, it becomes like a game of passing the parcel. Each component in the middle needs to receive the data and then pass it along to the next one. This process is known as "prop drilling." 

Now, here's where Context comes to the picture: 

a) Simplifying data sharing: Instead of manually passing the data through all those components, Context allows you to place the data in a central location. This is called a "context." This Context is like a shared storage room that any component can access.  

b) No more long chains: With Context, you don't need to form a long chain of data passing through the Use of Read Props. You put the data into the Context at the top level, and any component in your app can reach into the Context and grab what it needs. It doesn’t matter how deeply nested it is.  

c) Keeps code neat: Imagine if you had to send a message to someone in another part of a city. You wouldn't want to run around the city delivering the message yourself. Context is like a postal service that takes care of the delivery for you. This makes your code cleaner, more organised, and easier to maintain. 

Unlock your potential in app and web development with our React Native Training! Elevate your skills today. 

Use cases for Context 

Here are five use cases for using Context in React: 

a) Theme management: Context is excellent for managing the theme of your app. You can set up a theme Context that provides the current theme (like light or dark mode) to all components. This way, when a user switches the theme, every part of your app can instantly update its look without manually passing the theme as a prop to each component. 

b) User authentication: Context is handy for handling user authentication states. When a user logs in, you can use a Context to make this information available throughout your app. This way, any component can check if the user is authenticated without needing to pass this information from parent to child components manually. 

c) Language preferences: If your app supports multiple languages, you can use Context to handle language preferences. By creating a language Context, you can make the chosen language accessible to all parts of your app. This ensures that the content is displayed in the selected language without having to pass it down the component tree. 

d) Shopping cart: In e-commerce apps, managing a shopping cart is crucial. Context can be used to store the items in the cart. This cart Context can be accessed by various components like 

a) Product listings 

b) Shopping cart icon 

c) Checkout page.  

​It streamlines the process of adding, removing, or displaying cart items. 

e) App configuration settings: If your app has various configuration settings, such as notification preferences or display options, you can use Context to manage these settings. A configuration context can store these choices and apply them throughout the app, making it easy for users to personalise their experience. 

Conclusion 

In this blog, we've uncovered the magic of Context in React. It's the tool that allows data to move seamlessly between different parts of your application. Along with React Hooks, Context makes it easier to manage and share state across components, improving code efficiency. By eliminating the need to pass information manually through each component, Context keeps your code cleaner and more efficient. So, the next time you're building a React app, remember to utilise the power of Context and React Hooks for a smoother development experience.

Unlock your full potential in app and web development with our expert training courses on App & Web Development Training. Start your journey today at The Knowledge Academy.