[ReactDoc] Transitions

Transitions 是在 React 18 concurrent feature 中新的功能，在 transition 中的更新會被視為：

把更新的優先權下降，所以如果有其他更急迫的更新（例如，點擊）會先被執行
如果畫面曾經 render 過，可以避免該元件重新回到 Suspense 的 fallback 狀態，如此當該元件更新完成前，使用者仍可以與該元件互動

useTransition

useTransition @ Hooks API Reference

// https://reactjs.org/docs/hooks-reference.html#usetransition

const App = () => {
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    // startTransition 中所造成的會是 transition update

    startTransition(() => {
      setCount(count + 1);
    });
  };

  return (
    <div>
      {/* isPending 可以用來顯示當 transition 正在作用是的 pending state */}
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
};

React.startTransition

startTransition @ React.dev API Reference

React.startTransition(scope);

告知 React callback 中的內容是屬於 transitions，也就是在不 block UI 的情況下，更新 state。通常是在無法使用 React.useTransition 時才會使用。

import { startTransition } from 'react';

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

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

useTransition​

React.startTransition​

useTransition

React.startTransition