Day 3 of Mastering React Hooks – useContext

Introduction

Day 3 of my React Hooks journey takes me to the powerful useContext hook! This hook eliminates the pain of "prop drilling" by making it easier to share data across components, no matter how deeply nested they are in the component tree.

What is useContext?

The useContext hook is a way to access and consume context values in functional components. Context provides a way to share global data (like themes, user info, or language settings) without passing props manually through every level of your component tree.

How It Works

Using useContext is simple:

• Create a Context:

const MyContext = React.createContext(defaultValue);        

• Provide Context: Wrap your component tree with a context provider.

<MyContext.Provider value={sharedData}>
  <App />
</MyContext.Provider>        

• Consume Context: Access the context value anywhere using useContext.

const value = useContext(MyContext);        

Example: Theme Switcher

Here’s a simple example of how useContext works in practice:

// Create a context
const ThemeContext = React.createContext('light');

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

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <div>Current Theme: {theme}</div>;
}        

Benefits of useContext

1. Avoids Prop Drilling No need to pass props through intermediate components.
2. Simplifies Global State Sharing Easily share state like user authentication, app settings, or themes.
3. Declarative and Readable Clear syntax for consuming context values directly.

Things to Watch Out For

1. Overusing Context Don’t use context for state that changes frequently. It can lead to unnecessary re-renders.
2. Combine with Other Tools For complex state management, pair useContext with state management libraries like Redux or Zustand.
3. Memoization Matters Optimize the provider’s value to prevent re-renders of consuming components:

const memoizedValue = React.useMemo(() => ({ state, setState }), [state]);        

Takeaway

useContext is your go-to hook for creating shared global data in React. Whether it’s a theme toggle, user preferences, or language settings, it simplifies how you manage and consume shared data.

Excited to explore the next hook tomorrow—stay tuned! ??