Web Unit 3 Sprint 10 - Redux & State Management

What is the Context API?

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props that are required by many components within an application, like application state. Context provides a way to share data or state between components without having to explicitly pass a prop through every level of the tree.

The Context API solves the problem of prop drilling, which occurs when you pass data through multiple layers of components just to reach a deeply nested component that needs that data.

We use the Context API when we have:

• Global data that many components share
• Data that needs to pass through intermediate components that don't actually use the data
• Application state that needs to be accessed by components at different nesting levels

Because of one-way data flow in React, state must exist above the components that need it. Context helps you centralize application state and make it easily accessible to any component in the tree, no matter how deeply nested.

Creating a Context Provider

To provide data with Context, you need to complete these steps:

1. Create a context object using createContext()
2. Create a provider component that will hold and provide the data
3. Wrap your component tree (or part of it) with the provider

Here's a basic example of creating a context provider:

// context/ThemeContext.js
import React, { createContext } from 'react';

// Create the context
export const ThemeContext = createContext();

// Create the context provider
export const ThemeProvider = ({ children }) => {
  const theme = {
    colors: {
      primary: '#ff5722',
      background: '#222831',
      text: '#ffffff'
    }
  };

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

Then, you would wrap your application (or part of it) with the provider:

// index.js or App.js
import { ThemeProvider } from './context/ThemeContext';

root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

Using the useContext Hook

Once you've set up a context provider, any component within the provider's tree can access the context data using the useContext hook.

Here's how to consume context data in a component:

// components/Button.js
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

function Button({ children }) {
  // Access the context data
  const theme = useContext(ThemeContext);
  
  return (
    <button 
      style={{ 
        backgroundColor: theme.colors.primary,
        color: theme.colors.text
      }}
    >
      {children}
    </button>
  );
}

Key benefits of using Context:

• Eliminates prop drilling
• Makes component code cleaner and more focused
• Centralizes related data and functionality
• Components only consume what they need from the context

Context is perfect for themes, user authentication, language preferences, and other global application states that many components throughout your application need to access.