Bounding React Fiber work units with useTransition for paginated lists

Direct Answers

Is the maximum work duration before a Fiber yield configurable?
No. React does not expose a public API to configure the time slice. The Scheduler uses internal heuristics, typically around 5ms in production, to decide when to yield.

Should pagination depend on automatic Fiber yields or explicit chunking?
For normal page sizes, useTransition is sufficient. If the commit phase is heavy due to thousands of DOM nodes per page, add explicit chunking or virtualization.

Does flushSync override useTransition priority?
Yes. flushSync forces an immediate synchronous flush, bypassing transition priority and preventing yielding.

Implementation

Wrap page changes in startTransition and avoid flushSync.

import { useState, useTransition } from 'react';
function PaginatedList({ data }) {
  const [page, setPage] = useState(0);
  const [isPending, startTransition] = useTransition();
  const handlePageChange = (newPage) => {
    startTransition(() => { setPage(newPage); });
  };
  return (
    <div style={{ opacity: isPending ? 0.7 : 1 }}>
      <button onClick={() => handlePageChange(page + 1)}>Next</button>
    </div>
  );
}

Verification

Use Chrome Performance panel to check for long tasks vs yielded chunks. React DevTools Profiler shows updates marked as Transition.

Assumption: React 18+ concurrent root. Commit phase is always synchronous; large DOM counts cause jank regardless of transitions.

Diagnostic needed: How many DOM nodes are rendered per page? If > a few hundred, virtualization is required.