useCallbackRef.ts

// https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
// https://github.com/reactjs/rfcs/pull/220#issuecomment-1259938816

import React from 'react';

// Allow to access a fresh closures in the function but returns stable reference during rerenders
export function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T): T {
  const ref: React.MutableRefObject<{
    stableFn: T;
    callback: T;
  }> = React.useRef({
    stableFn: ((...args) => ref.current.callback(...args)) as T,
    callback,
  });
  // useLayoutEffect for React <18
  React.useLayoutEffect(() => {
    ref.current.callback = callback;
  });
  return ref.current.stableFn;
}

useLayoutEffect for React <18

What does this comment mean? What should I use with React 18+ here?