Skip to main content

[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

Transitions @ React Top-Level API

React.startTransition(callback);

告知 React callback 中的內容是屬於 transitions,通常是在無法使用 React.useTransition 時才會使用。