React Transitions

React Transitions

React 18 successfully introduced Transitions, a heavily awaited new concept implemented to gracefully distinguish between urgent and non-urgent state updates. Urgent UI updates require displaying immediate feedback (like text typing), while vastly non-urgent updates (like massively filtering a large data list) can be seamlessly deferred to keep the main UI thread buttery smooth.

useTransition Hook

import { useTransition, useState } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  // startTransition(() => { /* perform non-urgent background state update here */ });
  return <div>{isPending ? "Loading data in the background..." : "Finished Loading"}</div>;
}