总结

重点体验下原文的 Demo

重点是 Because this state update is marked as a transition, a slow re-render did not freeze the user interface.

Concurrent

原文

https://react.dev/reference/react/useTransition#i-want-to-call-usetransition-from-outside-a-component

Call useTransition at the top level of your component to mark state updates as non-blocking transitions.

import { useState, useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

useTransition returns an array with exactly two items:

1. The isPending flag that tells you whether there is a pending transition.
2. The startTransition function that lets you mark a state update as a transition.

You can then mark a state update as a transition like this:

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Transitions let you keep the user interface updates responsive even on slow devices.

With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.