React Hook Getter Pattern

A small pattern for exposing read-only derived state from a hook without extra re-renders: keep a getter ref in sync with your state and return it from the hook alongside your setter-friendly API.

function useCounter() {
  const [n, setN] = useState(0);
  const get = useRef(() => n);
  get.current = () => n;
  return [() => get.current(), setN];
}

Use the getter when you need the latest value inside async work or subscriptions without subscribing the component to every tick of that state.