Context API Advanced

The React Context API is a powerful tool for managing state and props in complex applications. It allows you to share data between components without passing props down manually. In this section, we’ll delve into advanced patterns and best practices for using the Context API in React 19.

Basic Example

To get started with the Context API, you need to create a context using the createContext function. Here’s a simple example:

// UserContext.js
import { createContext, useState } from 'react';
 
const UserContext = createContext();
 
const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
 
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};
 
export { UserContext, UserProvider };

// App.js
import { UserProvider } from './UserContext';
import Profile from './Profile';
 
function App() {
  return (
    <UserProvider>
      <Profile />
    </UserProvider>
  );
}

// Profile.js
import { useContext } from 'react';
import { UserContext } from './UserContext';
 
function Profile() {
  const { user, setUser } = useContext(UserContext);
 
  return (
    <div>
      {user ? <p>Welcome, {user}!</p> : <p>Please log in</p>}
      <button onClick={() => setUser('John Doe')}>Log in</button>
    </div>
  );
}

In this example, we create a UserContext and a UserProvider component that wraps our app. We then use the useContext hook to access the context in our Profile component.

Advanced Usage

For more complex scenarios, you might need to handle multiple contexts or use the Context API with other React features like hooks or suspense. Here’s an example that demonstrates how to use the Context API with the useReducer hook:

// TodosContext.js
import { createContext, useReducer } from 'react';
 
const TodosContext = createContext();
 
const todosReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.text, done: false }];
    case 'TOGGLE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return { ...todo, done: !todo.done };
        }
        return todo;
      });
    default:
      return state;
  }
};
 
const TodosProvider = ({ children }) => {
  const [todos, dispatch] = useReducer(todosReducer, []);
 
  return (
    <TodosContext.Provider value={{ todos, dispatch }}>
      {children}
    </TodosContext.Provider>
  );
};
 
export { TodosContext, TodosProvider };

This example uses the useReducer hook to manage a list of todos and provides an API for adding and toggling todos.

Best Practices

When using the Context API, keep the following best practices in mind:

• Use the Context API for global state that needs to be accessed by multiple components.
• Keep your context values simple and focused on a specific domain.
• Avoid using the Context API as a replacement for props; instead, use it to provide additional context that enhances your components.
• Use the useContext hook to access context values in your components.

Key Takeaways

• The Context API is a powerful tool for managing state and props in complex applications.
• Use the createContext function to create a context and the useContext hook to access context values.
• Keep your context values simple and focused on a specific domain.
• Use the Context API in conjunction with other React features like hooks and suspense to build robust and scalable applications.