`useLatestRef`

Hook for using ref that automatically updates value on each render.

This hook is enhanced (fixed) implementation of "Latest Ref Pattern"

Usage

import { useLatestRef } from '@krutoo/utils/react';

function App({ someValue }) {
  const ref = useLatestRef(someValue);

  // ...
}

Use cases

It is useful for example when you need to declare effect that uses some callback from props but you don't want to rerun effect on callback change.

Here is an example of how to create component with ability to listen when component is on screen:

import { useEffect, useRef } from 'react';
import { useLatestRef } from '@krutoo/utils/react';

interface Props {
  // callback that will be fired when element is in viewport
  onSeen: VoidFunction;
}

function MyWidget({ onSeen }: Props) {
  const elementRef = useRef<HTMLDivElement>(null);

  // ref with actual value from props on each render
  const onSeenRef = useLatestRef(onSeen);

  // effect will run once only after first render
  // but even onSeen is changed - actual version will be used
  useEffect(() => {
    const element = elementRef.current;

    if (!element) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        onSeenRef.current();
      }
    });

    observer.observe(elementRef.current);

    return () => {
      observer.disconnect();
    };
  }, [onSeenRef]);

  return <div ref={elementRef}>My widget</div>;
}