ReactJS - Context: A Beginner's Guide

Hello there, aspiring developers! Today, we're diving into the wonderful world of ReactJS Context. As your friendly neighborhood computer teacher, I'm here to guide you through this concept with the same enthusiasm I had when I first learned it. So, grab your favorite beverage, get comfy, and let's embark on this exciting journey together!

What is Context in React?

Imagine you're at a family reunion, and you want to share a funny story with everyone. Instead of whispering it to each person individually, wouldn't it be great if you could just announce it once, and everyone could hear it? That's exactly what Context does in React!

Context provides a way to pass data through the component tree without having to pass props down manually at every level. It's designed to share data that can be considered "global" for a tree of React components.

When to Use Context

Before we dive deeper, let's understand when to use Context:

1. When you have data that needs to be accessible by many components at different nesting levels.
2. When you want to avoid "prop drilling" (passing props through intermediate components that don't need the data).

Creating and Using Context

Let's walk through the process of creating and using Context with some code examples.

Step 1: Creating a Context

First, we need to create a Context. We'll use the React.createContext() method for this.

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

In this example, we've created a ThemeContext with a default value of 'light'. This default value is used when a component does not have a matching Provider above it in the tree.

Step 2: Providing Context

Now that we have our Context, we need to provide it to our component tree. We do this using the Context.Provider component.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

In this example, we're wrapping our Toolbar component (and by extension, all of its children) with ThemeContext.Provider. We're setting the value to "dark", which will be available to all components within this Provider.

Step 3: Consuming Context

Now comes the fun part - using our Context! There are two ways to consume Context:

1. Class.contextType
2. Context.Consumer

Let's look at both:

Using Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <button theme={this.context}>I'm a themed button!</button>;
  }
}

In this example, ThemedButton is a class component. We've set its contextType to our ThemeContext. Now, this.context will give us access to the current context value.

Using Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <button theme={value}>I'm a themed button!</button>}
    </ThemeContext.Consumer>
  );
}

Here, we're using the Context.Consumer component. It uses a render prop to pass the current context value to a function.

Multiple Contexts

Sometimes, you might need to use multiple contexts. React allows you to nest multiple Context Providers:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value="John Doe">
        <Toolbar />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

And you can consume multiple contexts like this:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <button theme={theme}>
              {user} is using {theme} theme
            </button>
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

Updating Context

Context can also be dynamic. Let's look at an example where we update our theme:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </ThemeContext.Provider>
  );
}

In this example, we're using the useState hook to manage our theme state. We're passing both the current theme and the setTheme function in our context value.

Context Methods

Here's a table summarizing the main Context methods we've covered:

Method	Description
React.createContext()	Creates a Context object
Context.Provider	Provides a context value to components
Class.contextType	Allows class components to consume a single context
Context.Consumer	Allows function components to subscribe to a context

Conclusion

And there you have it, folks! We've journeyed through the land of React Context, from its creation to its consumption and even its updating. Context is a powerful tool in React, allowing you to avoid prop drilling and manage global state effectively.

Remember, like any tool, Context isn't always the right solution. For simpler cases, props might still be your best bet. But when you need to share data across many components at different levels, Context can be your new best friend.

Keep practicing, keep coding, and most importantly, keep having fun! Until next time, happy Reacting!

Credits: Image by storyset