todo-app

1
import { useState, useEffect } from 'react';
2
import { useResizeObserver, useDebouncedValue } from '@mantine/hooks';
3
import { nanoid } from 'nanoid';
4

5
/**
6
 * https://github.com/mantinedev/mantine/issues/3330
7
 */
8
export const useDelayedKeyOnResize = (delay = 0) => {
9
  const [key, setKey] = useState(nanoid());
10
  const [ref, rect] = useResizeObserver();
11
  const [debouncedRect] = useDebouncedValue(rect, delay);
12

13
  useEffect(() => {
14
    setKey(nanoid());
15
  }, [debouncedRect]);
16

17
  return { ref, key };
18
};
19