This content originally appeared on Level Up Coding - Medium and was authored by Hayk Simonyan
React 19 State Management: Context API and the New use() API Explained
Context API is one of React’s built-in solutions for managing shared state across components. But with the release of React 19, there’s a new addition to the mix: the use() hook.
In this article, you’ll learn:
- What the Context API does
- How to use it with useContext
- What the new use() API is and when to use it
- Why this matters for real-world apps
Let’s break it down.
What is the Context API?
The Context API lets you create global state that any component in your app can access, without manually passing props through every level of the tree.
Here’s a simple example of how it works.
Step 1: Create a Context
import { createContext } from 'react';
...
export const CartContext = createContext();Step 2: Wrap Your App with a Provider
function App() {
const cart = { items: [], total: 0 };
return (
<CartContext.Provider value={cart}>
<YourRoutes />
</CartContext.Provider>
);
}Step 3: Access the Context in Child Components
import { useContext } from 'react';
import { CartContext } from './CartContext';
function CartSummary() {
const cart = useContext(CartContext);
return <div>{cart.items.length} items in your cart</div>;
}This setup works great for global values like:
- Auth user
- Theme
- Cart data
- Feature flags
But React 19 introduced something new…
The New use() API in React 19
React 19 introduces a new experimental hook: use(). It allows components to unwrap context or async values directly without using useContext.
Here’s the same example using use():
import { CartContext } from './CartContext';
function CartSummary() {
const cart = use(CartContext); // No need for useContext!
return <div>{cart.items.length} items in your cart</div>;
}That’s it.
No useContext and no boilerplate, just use() the context.
Why use()?
use() is designed to work seamlessly with both:
- Contexts (like above)
- Async resources (like data loaders in Server Components)
It’s part of React’s broader move toward simplifying data access, especially in mixed client/server environments.
Real-World Use Case: Cart State
Let’s say you’re building an e-commerce site.
Instead of prop-drilling cart data into every component, you create a context:
export const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
return (
<CartContext.Provider value={{ cart, setCart }}>
{children}
</CartContext.Provider>
);
}
And in any component like the navbar, product grid, or checkout, you just do:
const { cart } = useContext(CartContext);
// or
const { cart } = use(CartContext);It keeps your components clean and focused, without cluttering props.
Final Thoughts
React’s Context API is still one of the simplest, most flexible ways to manage shared state, especially for small to medium apps.
And with use(), React 19 comes with less boilerplate and more ergonomic data access, especially in server-driven environments.
Stick with useContext for now unless you're using a React 19 setup that fully supports use(). But definitely keep an eye on it, it’s the direction React is heading.
Want to go deeper with React?
Check out my React 19 Mastery course, where I teach you how to build real-world apps step by step, from component architecture to clean state management and beyond 👉 Join here
React State Management: Context API and the New use() API Explained was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Hayk Simonyan
Hayk Simonyan | Sciencx (2025-06-11T15:05:16+00:00) React State Management: Context API and the New use() API Explained. Retrieved from https://www.scien.cx/2025/06/11/react-state-management-context-api-and-the-new-use-api-explained/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.