#todo

use Hook

New API to read resources in render. Reading a promise with use will cause React to Suspend until the promise resolves.

import {use} from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

function Page({commentsPromise}) {
  // When `use` suspends in Comments,
  // this Suspense boundary will be shown.
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}

Note that use does not support promises created in render.

The use hook can be called conditionally, unlike other hooks. This means you can consume context rather than using useContext.

[[react]] [[reactapi]]