diff --git a/.changeset/use-latest-value.md b/.changeset/use-latest-value.md new file mode 100644 index 00000000..4dc0107e --- /dev/null +++ b/.changeset/use-latest-value.md @@ -0,0 +1,5 @@ +--- +'@dnd-kit/utilities': minor +--- + +Introduced the `useLatestValue` hook, which returns a ref that holds the latest value of a given argument. diff --git a/packages/core/src/hooks/useDraggable.ts b/packages/core/src/hooks/useDraggable.ts index cf38d4db..3ca7c4a9 100644 --- a/packages/core/src/hooks/useDraggable.ts +++ b/packages/core/src/hooks/useDraggable.ts @@ -2,17 +2,14 @@ import {createContext, useContext, useMemo} from 'react'; import { Transform, useNodeRef, - useUniqueId, useIsomorphicLayoutEffect, + useLatestValue, + useUniqueId, } from '@dnd-kit/utilities'; import {Context, Data} from '../store'; import {ActiveDraggableContext} from '../components/DndContext'; -import { - useLatestValue, - useSyntheticListeners, - SyntheticListenerMap, -} from './utilities'; +import {useSyntheticListeners, SyntheticListenerMap} from './utilities'; export interface UseDraggableArguments { id: string; diff --git a/packages/core/src/hooks/useDroppable.ts b/packages/core/src/hooks/useDroppable.ts index 9441f013..f48f2678 100644 --- a/packages/core/src/hooks/useDroppable.ts +++ b/packages/core/src/hooks/useDroppable.ts @@ -1,13 +1,13 @@ import {useCallback, useContext, useEffect, useMemo, useRef} from 'react'; import { useIsomorphicLayoutEffect, + useLatestValue, useNodeRef, useUniqueId, } from '@dnd-kit/utilities'; import {Context, Action, Data} from '../store'; import type {ClientRect, UniqueIdentifier} from '../types'; -import {useLatestValue} from './utilities'; interface ResizeObserverConfig { /** Whether the ResizeObserver should be disabled entirely */ diff --git a/packages/core/src/hooks/utilities/index.ts b/packages/core/src/hooks/utilities/index.ts index a187ed21..76b52cc0 100644 --- a/packages/core/src/hooks/utilities/index.ts +++ b/packages/core/src/hooks/utilities/index.ts @@ -6,7 +6,6 @@ export { export type {Options as AutoScrollOptions} from './useAutoScroller'; export {useCachedNode} from './useCachedNode'; export {useCombineActivators} from './useCombineActivators'; -export {useLatestValue} from './useLatestValue'; export { useDroppableMeasuring, MeasuringFrequency, diff --git a/packages/core/src/hooks/utilities/useLatestValue.ts b/packages/core/src/hooks/utilities/useLatestValue.ts deleted file mode 100644 index 9e32185b..00000000 --- a/packages/core/src/hooks/utilities/useLatestValue.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {useRef} from 'react'; -import {useIsomorphicLayoutEffect} from '@dnd-kit/utilities'; - -export function useLatestValue(data: T) { - const dataRef = useRef(data); - - useIsomorphicLayoutEffect(() => { - if (dataRef.current !== data) { - dataRef.current = data; - } - }, [data]); - - return dataRef; -} diff --git a/packages/utilities/src/hooks/index.ts b/packages/utilities/src/hooks/index.ts index 8ffd428e..d3898277 100644 --- a/packages/utilities/src/hooks/index.ts +++ b/packages/utilities/src/hooks/index.ts @@ -1,6 +1,7 @@ export {useCombinedRefs} from './useCombinedRefs'; export {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect'; export {useInterval} from './useInterval'; +export {useLatestValue} from './useLatestValue'; export {useLazyMemo} from './useLazyMemo'; export {useNodeRef} from './useNodeRef'; export {useUniqueId} from './useUniqueId'; diff --git a/packages/utilities/src/hooks/useLatestValue.ts b/packages/utilities/src/hooks/useLatestValue.ts new file mode 100644 index 00000000..583d2d40 --- /dev/null +++ b/packages/utilities/src/hooks/useLatestValue.ts @@ -0,0 +1,15 @@ +import {useRef} from 'react'; + +import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect'; + +export function useLatestValue(value: T) { + const valueRef = useRef(value); + + useIsomorphicLayoutEffect(() => { + if (valueRef.current !== value) { + valueRef.current = value; + } + }, [value]); + + return valueRef; +} diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts index d08b5b91..9a005cd7 100644 --- a/packages/utilities/src/index.ts +++ b/packages/utilities/src/index.ts @@ -2,6 +2,7 @@ export { useCombinedRefs, useIsomorphicLayoutEffect, useInterval, + useLatestValue, useLazyMemo, useNodeRef, useUniqueId,