Comment by cyberax

I think it might already be working like that? React now has concurrent rendering, so it will try to optimistically render the DOM on the first pass. This applies even if you have hooks.

There is no real difference now between doing:

  const [state, setState] = useState(42);

and:

  const [state, setState] = useState(undefined);
  useEffect(() => setState(42));

They both will result in essentially the same amount of work. Same for calculations with useMemo(). It was a different situation before React 18, because rendering passes were essentially atomic.