React lazy ref

approach-1.ts

import type { MutableRefObject } from 'react'
import { useRef } from 'react'

const noop = {}

export function useLazyRef<T>(init: () => T) {
  const ref = useRef<T | typeof noop>(noop)

  if (ref.current === noop) {
    ref.current = init()
  }

  return ref as React.MutableRefObject<T>
}

approach-2.ts

import type { MutableRefObject } from 'react'
import { useRef } from 'react'

const noop = Symbol('noop')

export function useLazyRef<T>(init: () => T) {
  const lazyRef = useRef<T | typeof noop>(noop)

  if (lazyRef.current === noop) {
    lazyRef.current = init()
  }

  return lazyRef as MutableRefObject<T>
}