Unlike traditional React hooks (such as useState or useEffect) which follow strict Rules of Hooks (cannot be placed inside if statements or loops), the new React 19 `use` API can be called conditionally! It allows components to unwrap asynchronous Promises and read Context dynamically.

1. Unwrapping Promises inside Components

When passed a Promise, use(promise) suspends the component until the Promise resolves, integrating seamlessly with <Suspense> fallback boundaries.

import React, { use, Suspense } from 'react';

// 1. Promise passed as a prop
function UserProfile({ userPromise }) {
  // 'use' unwraps the resolved data directly!
  const user = use(userPromise);

  return (
    <div className="card p-3 border-info">
      <h4>{user.name}</h4>
      <p>Email: {user.email}</p>
    </div>
  );
}

// 2. Parent Container with Suspense boundary
export default function App() {
  const userPromise = fetch('/api/user').then(res => res.json());

  return (
    <Suspense fallback={<div className="alert alert-info">Loading user profile...</div>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

2. Conditional Context Reading with `use(Context)`

Unlike useContext(ThemeContext) which top-level must be called on every render, use(ThemeContext) can be wrapped inside an if condition!

import { use } from 'react';
import { ThemeContext } from './ThemeContext';

function Notification({ showDetails }) {
  if (showDetails) {
    // Valid in React 19! Conditional Context reading
    const theme = use(ThemeContext);
    return <div style={{ color: theme.color }}>Detailed Notification</div>;
  }

  return <div>Simple Notification</div>;
}
Master React 19 Data Streaming with Telugu IT Tutorials

Learn Server Components, Suspense, and data streaming patterns in our interactive live courses. View React Courses →