ReactJS - Using useContext: A Beginner's Guide

Hello there, aspiring React developers! Today, we're going to dive into one of the most powerful features of React: the useContext hook. As your friendly neighborhood computer teacher, I'm here to guide you through this concept step-by-step. Don't worry if you're new to programming – we'll start from the basics and work our way up!

What is Context in React?

Before we jump into useContext, let's understand what Context is in React. Imagine you're organizing a big family dinner. You've got a special sauce that needs to be passed around the table. Instead of passing it from person to person (which is like prop drilling in React), wouldn't it be easier if you could place it in the center of the table where everyone could reach it? That's essentially what Context does in React – it provides a way to pass data through the component tree without having to pass props down manually at every level.

Understanding useContext

Now, useContext is a hook that allows us to easily consume this Context in our functional components. It's like giving each person at the dinner table a direct way to access that special sauce without asking others to pass it.

Signature of useContext

Let's look at how we use useContext:

const value = useContext(MyContext)

Here's what each part means:

• value: This is the current context value
• MyContext: This is the context object (created with React.createContext)

It's that simple! But let's break it down further with a real-world example.

Context Usage Through Hook

Let's create a simple theme switcher for our app. We'll use Context to store the current theme and useContext to access it in our components.

First, let's create our context:

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

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

export default ThemeContext;

Now, let's create a component that uses this context:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'light' ? '#fff' : '#000', 
                     color: theme === 'light' ? '#000' : '#fff' }}>
      I'm a {theme} themed button!
    </button>
  );
}

export default ThemedButton;

In this example, useContext(ThemeContext) gives us the current theme value. We then use this value to style our button.

Now, let's see how we can provide this context in our app:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <div>
        <h1>Welcome to our themed app!</h1>
        <ThemedButton />
      </div>
    </ThemeContext.Provider>
  );
}

export default App;

Here, we're wrapping our app in ThemeContext.Provider and setting the value to "dark". This means any component within this provider can access this theme value using useContext.

Updating Context

Now, what if we want to allow users to switch themes? We can do this by updating our context value. Let's modify our App component:

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

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

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <h1>Welcome to our themed app!</h1>
        <ThemedButton />
        <button onClick={toggleTheme}>Toggle Theme</button>
      </div>
    </ThemeContext.Provider>
  );
}

export default App;

Now we're using state to manage our theme, and we've added a button to toggle it. When the theme changes, all components using useContext(ThemeContext) will automatically re-render with the new value.

Conclusion

And there you have it! We've covered the basics of useContext in React. Let's recap the main points:

1. Context provides a way to pass data through the component tree without prop-drilling.
2. useContext is a hook that allows us to easily consume Context in functional components.
3. To use useContext, we need to create a Context first using React.createContext.
4. We can update Context by changing the value prop of the Provider component.

Remember, while Context is powerful, it's not always the best solution. For simple props that only need to be passed down one or two levels, regular prop passing is often clearer. Think of Context like that special sauce at the family dinner – use it when you need to share something widely, but don't overuse it!

I hope this guide has helped demystify useContext for you. Keep practicing, and soon you'll be a React Context pro! Happy coding!

Method	Description
React.createContext	Creates a Context object
useContext	Hook to consume a Context value
<Context.Provider>	Component to provide a Context value to its children

Credits: Image by storyset