Provider and useContext

Learn to provide data with a Provider and read it with useContext.

Provider and useContext

Provider is the component that gives a value to context. It's used as <ThemeContext.Provider value={ '{ "dark" }' }>...</ThemeContext.Provider>; all wrapped components read this value.

On the reading side, the useContext hook comes in: const theme = useContext(ThemeContext);. This call returns the value of the nearest Provider. Without a Provider, the default value is used.

Every time the context changes, all components reading it via useContext re-render. So care is needed to avoid unnecessary changes to the Provider's value prop.

Multiple Providers

You can wrap the same context with different values in different subtrees. If the top level uses <ThemeContext.Provider value="dark"> and a lower level uses <ThemeContext.Provider value="light">, lower-level components read light.

This pattern is handy for showing a different theme inside a modal or adding a language switch. The innermost Provider always wins.

Nested Providers cost a bit but still use the same context. You don't need to define a new context object.

Exercise Wrap with Theme.Provider

Complete the skeleton. Write an App component that wraps <h1>Site</h1> with <ThemeContext.Provider value="dark">. Assume ThemeContext is imported. Don't forget to export.

Show example solution

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <h1>Site</h1>
    </ThemeContext.Provider>
  );
}

export default App;

Test yourself

What does useContext return?
- The nearest Provider's value
- All Providers
- Always the default
- State
Show answer

The nearest Provider's value — useContext returns the nearest Provider's value.

Provider prop

Provider passes the value via the ____ prop.

Show answer

Provider passes the value via the value prop.

Match the Provider pattern

Provider

Gives value
value

Carries data
useContext

Reads
Nested

Inner wins

Next lesson: Summary - Context

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies