Why useEffect in useCallbackRef?

[pshdev1030]

Question

In useCallbackRef, I think it would be safer to use useLayoutEffect because useLayoutEffect runs before print, so is there a reason to use it?

I think there will be little impact on rendering performance, is that the reason?

import * as React from 'react';

function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {
  const callbackRef = React.useRef(callback);

  React.useLayoutEffect(() => {
    callbackRef.current = callback;
  });

  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);
}

export { useCallbackRef };

[benoitgrelard]

There shouldn't be any reason to use useLayoutEffect over useEffect here. useLayoutEffect fires before the browser repaints the screen, so it's only really needed for things that depends on layout, etc like measuring elements to position things correctly. Otherwise you might see a flicker of an old position in a previous paint.
Here we are merely keeping a callback in sync, so that's irrelevant.

[pshdev1030]

I misunderstood. Thank you!