Cache a variable across render

use-memo-compare.ts

import { useRef, useLayoutEffect } from "react";

export const useMemoCompare = <T>(
  next: T,
  compare: (previous: T | undefined, next: T) => boolean
): T => {
  const previousRef = useRef<T>();
  const previous = previousRef.current;
  const isEqual = compare(previous, next);

  useLayoutEffect(() => {
    if (!isEqual) previousRef.current = next;
  }, [next]);
  return isEqual ? previous ?? next : next;
};