You're correct — useDeferredValue and startTransition behave differently.

useDeferredValue

• It defers the value propagation to a lower priority.
• Does not trigger concurrent rendering or time-slicing.
• Useful when you want to delay passing expensive values (e.g. to a slow component), but not chunk rendering work.

useDeferredValue2 (with startTransition)

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

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

  return deferred;
}

• This actually wraps the update in a startTransition.
• The update is treated as non-urgent and time-sliced.
• React splits the work into 5ms chunks if needed.

useDeferredValue3 (plain setState)

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

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

  return deferred;
}

• This is just a regular state update.
• No transition, no time-slicing.
• Runs at the default sync/urgent priority.

If your goal is to break up long renders and improve responsiveness, use startTransition. useDeferredValue is helpful for deferring values, but it won't split up rendering work.

Happy coding!!