Expose useLatestValue hook

.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.

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;

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 */

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,

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';

packages/utilities/src/hooks/useLatestValue.ts

@@ -0,0 +1,15 @@
+import {useRef} from 'react';
+
+import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
+
+export function useLatestValue<T extends any>(value: T) {
+  const valueRef = useRef<T>(value);
+
+  useIsomorphicLayoutEffect(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+    }
+  }, [value]);
+
+  return valueRef;
+}

packages/utilities/src/index.ts

@@ -2,6 +2,7 @@ export {
   useCombinedRefs,
   useIsomorphicLayoutEffect,
   useInterval,
+  useLatestValue,
   useLazyMemo,
   useNodeRef,
   useUniqueId,