Reading Context with use

In this tutorial, you will learn how to read Context using the use API instead of useContext. This is the modern, React 19 way to consume Context values and it fits perfectly with how React now treats data, async resources, and rendering.

What We Will Learn

Why useContext is no longer preferred
How the use API reads Context values
How Context consumption becomes simpler and more consistent
Real world examples with clean file structure
Best practices and common mistakes

By the end, you will never reach for useContext again.

Why `useContext` Is Being Replaced

Before React 19, Context was read like this:

const value = useContext(MyContext)

This caused a few problems:

Special hook just for Context
Inconsistent with how other data is read
Harder to teach and reason about
More mental overhead for beginners

React 19 introduces a single, unified way to read values:

use reads anything that can suspend or provide a value

That includes Context.

The Core Idea

Instead of:

useContext(ThemeContext)

You now write:

use(ThemeContext)

That is it.

Same behavior. Cleaner API. One mental model.

Creating Context (No Change)

Creating Context works exactly the same as before.

// contexts/theme-context.ts
import { createContext } from "react"
 
export const ThemeContext = createContext<"light" | "dark">("light")

No changes here.

Providing Context Using `<Context>`

React 19 also modernizes how Context is provided.

// app/layout.tsx
import { ThemeContext } from "../contexts/theme-context"
 
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <title>Reading Context with use</title>
      <meta name="description" content="React 19 Context consumption tutorial" />
 
      <ThemeContext value="dark">
        {children}
      </ThemeContext>
    </>
  )
}

This keeps Context usage declarative and readable.

Reading Context with `use`

Here is the modern way to consume Context.

// components/theme-label.tsx
import { use } from "react"
import { ThemeContext } from "../contexts/theme-context"
 
export function ThemeLabel() {
  const theme = use(ThemeContext)
  return <p>Current theme: {theme}</p>
}

There is no hook named after Context anymore. You simply read the value.

Why This Is Better

One API for Everything

With React 19:

Async data uses use(promise)
Context uses use(context)
Resources use use(resource)

You do not switch mental models.

Cleaner Components

Old style:

import { useContext } from "react"
 
const theme = useContext(ThemeContext)

New style:

import { use } from "react"
 
const theme = use(ThemeContext)

Less noise. More intent.

Context Reads Are Still Reactive

Using use(ThemeContext):

Subscribes to Context updates
Re-renders when the value changes
Works exactly like useContext

Nothing about reactivity changed. Only the API did.

Multiple Contexts in One Component

Reading multiple Contexts is straightforward.

// components/app-info.tsx
import { use } from "react"
import { ThemeContext } from "../contexts/theme-context"
import { AuthContext } from "../contexts/auth-context"
 
export function AppInfo() {
  const theme = use(ThemeContext)
  const user = use(AuthContext)
 
  return (
    <p>
      Theme: {theme}, User: {user.name}
    </p>
  )
}

This scales cleanly without hook clutter.

Important Rules

Call use at the top level
Never call use conditionally
Do not wrap use in try or catch
Context must exist above in the tree

These rules are the same as hooks.

Common Mistakes

Using `useContext` in New Code

const theme = useContext(ThemeContext)

This still works, but it is legacy style. Use use instead.

Forgetting the Provider

If no provider exists above, use(Context) returns the default value.

This is expected behavior, not an error.

Mental Model

Think of Context like a global variable scoped to a subtree.

use(Context) means:

Read the current value flowing through the tree at this point

That is all.

When You Should Use `use` for Context

Always use it when:

Building new React 19 components
Teaching React to beginners
Reading global app state
Working with modern Suspense based apps

useContext becomes a legacy escape hatch, not the default.

Conclusion

React 19 simplifies Context consumption by unifying it under the use API.

You get:

One way to read values
Less API surface
Cleaner components
Easier mental models

If you are writing modern React, reading Context with use is the correct and future proof approach.

React Tutorial