Mastering React Hooks: A Beginner's Guide to useContext

?? Promo:

Since we discussed how to manage multiple pieces of state in one place with useReducer, now we’ll see how useContext allows you to share and access state across components without prop drilling.

If you've ever struggled with prop drilling—passing props through multiple layers of components useContext is here to simplify state sharing across the component tree. Whether you’re managing themes, user data, or other global states, useContext allows for efficient access to shared data without the hassle of repetitive prop passing.

?? What is useContext?

useContext is a React hook that enables a component to access values provided by a Context in any component within the provider’s tree, avoiding the need to pass props down manually. This can make state and data sharing across components easy and clean.

?? How Does It Work?

1. Create a Context: First, create a context to store shared data.
2. Provide the Context: Wrap the components that need access to this context with a Provider.
3. Consume the Context: Use useContext in any child component to access the context value.

? Example:

Here's a basic example of using useContext to manage and share a theme:

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

// Step 1: Create Context
const ThemeContext = createContext();

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

  return (
    // Step 2: Provide Context
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}        

function Toolbar() {
  return (
    <div>
      <ThemedButton /> // ? theme, setTheme not passed as Props
    </div>
  );
}        

function ThemedButton() {
  // ? Step 3: Consume Context
  const { theme, setTheme } = useContext(ThemeContext); 

  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
    >
      Switch Theme
    </button>
  );
}        

?? Key Points to Remember

• Avoid Overusing Context Using useContext for data that changes frequently can cause unnecessary re-renders. Stick to values that don't change too often, like themes or user roles.

const { theme } = useContext(ThemeContext); // Correct ?

// Avoid passing props unnecessarily
const theme = ThemeContext.theme; // ? This doesn’t use `useContext` properly        

• Memoize Context Providers If your context value is an object or function, wrap it in useMemo or useCallback to prevent re-renders when only non-context data changes.

const providerValue = useMemo(() => ({ theme, setTheme }), [theme]); // Correct ?        

• Simplify Complex State with useReducer For complex or multi-action state, consider using useReducer with useContext to enhance performance and structure.

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [state, dispatch] = useReducer(themeReducer, initialState);

  return <ThemeContext.Provider value={{ state, dispatch }}>{children}</ThemeContext.Provider>;
}        

• Nested Contexts In cases where different contexts are required, wrap them within each other to allow for independent control without prop drilling.
• Know When to Use useContext Over Prop Drilling useContext shines in scenarios where data must be accessible by many nested components. However, if only one or two levels need the data, consider passing it as props.

?? Conclusion

useContext is a valuable tool for managing global state or data that many components need to access. By enabling components to "consume" values directly from a provider, it simplifies state management and reduces the need for prop drilling. But remember: use it strategically for the best performance.

?? What Next ?

Now that we know how to share global state, what if we need to memorize expensive calculations to improve our component’s performance? Can you guess the hook....?

Stay tuned to find out!