useGetterState.ts

function useGetterState<T>(value: T) {
  const [state, setState] = React.useState<T>(value)
  const stateRef = React.useRef<T>(state)

  React.useEffect(() => {
    stateRef.current = state
  }, [state])

  const getter = React.useCallback(function (newValue?: React.SetStateAction<T>): T {
    // use arguments.length because it's the only way to
    // distinuish between getter() and getter(undefined)
    if (arguments.length !== 0) {
      setState(newValue!)
    }

    return stateRef.current
  }, [])

  return getter
}

const Component = () => {
  const count = useGetterState(0)

  const inc = React.useCallback(() => {
    count((prev) => prev + 1)
  }, [count])

  React.useEffect(() => {
    window.addEventListener('click', () => {
      console.log(count())
    })
  }, [count])

  return <button onClick={inc}>{count()}</button>
}