I had a bunch of useDeferredValue() in my codebase, I thought it was enough for concurrent mode. However, it wasn’t splitting up renders into small chunks. Renders triggered by setState wrapped in startTransition splits up the render into 5ms chunks.

In React devtools, I see that renders triggered by setState have priority: immediate. Renders caused by useDeferredValue or startTransition+setState have priority: normal. Therefore, for a long time, I assumed the latter two would be the same thing.

I tried replacing all my useDeferredValue calls with something like:

function useDeferredValue2(val) {
  const [deferred, setDeferred] = useState(val);

  useEffect(() => {
    React.startTransition(() => {
      setDeferred(val);
    });
  }, [val]);

  return deferred;
}

After this change, all the renders caused by useDeferredValue2 are now split into 5ms chunks. So it turns out they’re very different. Is useDeferredValue basically the same as this?:

function useDeferredValue3(val) {
  const [deferred, setDeferred] = useState(val);

  useEffect(() => {
    setDeferred(val);
  }, [val]);

  return deferred;
}

In the React internals, what are some differences between the renders triggered by useDeferredValue, useDeferredValue2, and useDeferredValue3?