.tip

use is the one hook you may call inside an if. Hand it a promise and the component suspends until it resolves. Hand it a context and it reads it.

function Comments({ promise }: { promise: Promise<Comment[]> }) {
  const comments = use(promise);
  return <List items={comments} />;
}

Create the promise in a parent or on the server and pass it down. Creating it in render makes a new one every time.