Useful hook to suspend your prop change

useSuspendedProp.js

export default function useSuspendedProp(prop, timeout = 500) {
  const initialValue = useRef(prop);
  const [copy, setCopy] = useState(prop);
  const timeoutRef = useRef(null);

  useEffect(() => {
    clearTimeout(timeoutRef.current);

    if (
      initialValue.current === prop &&
      initialValue.current !== copy
    ) {
      setCopy(prop);
    } else {
      timeoutRef.current = setTimeout(() => {
        setCopy(prop);
      }, timeout);
    }

    return () => clearTimeout(timeoutRef.current);
  }, [prop]);

  return copy;
}