useContext.md

Using Context in React

React Context is a powerful feature that allows you to share values between components without having to explicitly pass props through every level of the component tree. This is particularly useful for global data management, such as themes, user authentication, and settings.

Table of Contents

Introduction to Context Creating a Context Providing Context Consuming Context - Using useContext Hook - Using Context.Consumer - Using Context with Functional Components Best Practices

---

Introduction to Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level. It is primarily useful for sharing information that is considered "global" for a tree of React components, such as theme settings or user data.

Creating a Context

First, you need to create a Context object using the createContext API. This returns an object with a Provider and a Consumer.

Example:

import React, { createContext } from 'react';

const MyContext = createContext();

Providing Context

To supply the context value to components, wrap the part of your component tree that needs access in a Provider and pass the value you want to share.

Example:

const App = () => {
  const user = { name: 'John Doe', age: 30 };

  return (
    <MyContext.Provider value={user}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

Consuming Context

There are two main ways to consume context in a functional component: using the useContext hook or the Consumer component.

Using useContext Hook

The useContext hook allows you to access the context value directly without needing to nest components.

import React, { useContext } from 'react';

const ChildComponent = () => {
  const user = useContext(MyContext);

  return <div>Hello, {user.name}!</div>;
};

Using Context.Consumer

Alternatively, you can use the Consumer component to consume the context.

const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {user => <div>Hello, {user.name}!</div>}
    </MyContext.Consumer>
  );
};

Using Context with Functional Components

The useContext hook is typically the preferred method in functional components, as it simplifies syntax and reduces nesting.

Example of Context with useContext

import React, { createContext, useContext } from 'react';

// Create Context
const MyContext = createContext();

// Provider Component
const App = () => {
  const user = { name: 'John Doe', age: 30 };

  return (
    <MyContext.Provider value={user}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// Child Component
const ChildComponent = () => {
  const user = useContext(MyContext);
  
  return <div>Hello, {user.name}!</div>;
};

export default App;

Best Practices

Scope Context Appropriately: Define context at the right level; don't create context for every small piece of data unless it’s truly global.

Avoid Overusing Context: Use context for globally shared data but prefer props drilling for localized data to keep components simple.

Memoize Values: If the context value depends on calculations or state, consider using useMemo to prevent unnecessary re-renders.

Combine with Other Hooks: You can use context together with local component state and other hooks for more complex scenarios.

Use Descriptive Naming: Give your context and provider descriptive names to make the code easier to understand.

[EOF]