New 'use' hook in React js 2025 Advantages and usage, over useContext hook 2025
New use Hook in React JS 2025
React 18+ and in React 2025 introduces a new hook called use. This hook helps to read the result of a Promise directly inside a component. It works great with async data fetching libraries or even fetch itself, and is often used in Server Components.
✨ Advantages over useContext
- No need for creating and wrapping
Context.Provider
- Direct usage for promises or async data
- Simplified data fetching in server components
- Less boilerplate
📦 Example: Basic Usage of use Hook
import { use } from 'react';
async function fetchPokemon() {
const res = await fetch('https://pokeapi.co/api/v2/pokemon/ditto');
return res.json();
}
const pokemonData = fetchPokemon();
export default function PokemonComponent() {
const data = use(pokemonData); // Suspense-aware use of promise
return (
{data.name}
Height: {data.height}
);
}
⚠️ Note:
The use() hook is only available in server components (like in Next.js App Router), and it throws a promise to Suspense automatically.