useLastNonNullableValue.ts

import { useEffect, useState } from 'react';

/**
 * Use the last value that isn't `null` or `undefined`.
 * Useful for instance in modals where you don't want the selected item to flicker when the modal is closed.
 */
export function useLastNonNullableValue<T>(currentValue: T) {
  const [value, setValue] = useState(currentValue);
  useEffect(() => {
    setValue((stored) => currentValue ?? stored);
  }, [currentValue]);

  return value;
}