Using the useContext Hook

The useContext hook is the modern way to consume context in React function components. It provides a clean, simple API to access context values.

Basic useContext Usage

The hook takes a context object and returns its current value:

Reading Context in Multiple Components

Multiple components can read from the same context:

Using Multiple Contexts

Components can consume multiple contexts at once:

Context Without a Provider

When there's no Provider above a component, useContext returns the default value:

Updating Context Values

Context values can include functions to update state:

Exercise: Consume a Theme Context

Exercise: Multiple Contexts

Exercise: Context with Updater

Key Takeaways

1. useContext is simple - Pass context object, get value back
2. Call at component top level - Like all hooks, not inside conditions or loops
3. Default value matters - Used when no Provider is above the component
4. Multiple contexts work together - Call useContext multiple times for different contexts
5. Context can include functions - Provide both values and updater functions