✅ Basic Usage

import { use } from 'react';
const result = use(promiseOrContext);

• resource: a Promise or a Context
• use() returns:
  • the resolved value of a Promise
  • the current value of a Context
• Designed for use in async components, RSC, and inside loops or conditionals

✅ With Promise (Data Fetching)

function Message({ messagePromise }) {
  const message = use(messagePromise); // ✅ Suspends while pending
  return <p>{message}</p>;
}

• Suspends while the Promise is pending
• Requires wrapping in <Suspense fallback={...}>
• If rejected, fallback of nearest Error Boundary is shown

✅ Prefer:

• Create the Promise in a Server Component
• Pass it to a Client Component as a prop (Promise stays stable across re-renders)

✅ With Context (Context Reading)

const theme = use(ThemeContext);

• Works like useContext()
• But can be used inside loops and conditionals

if (show) {
  const theme = use(ThemeContext); // ✅ valid
}