From ff17c0497ba5604648319917ff327bd52518d426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Tue, 17 Sep 2024 16:47:16 -0400
Subject: [PATCH] Allow dependencies to be passed to `useComputed`

---
 .changeset/use-computed-deps.md                 |  5 +++++
 .../react/src/core/hooks/useDragOperation.ts    |  5 ++---
 packages/react/src/hooks/useComputed.ts         | 13 ++++++++++---
 packages/react/src/hooks/useSignal.ts           | 17 +++++++----------
 4 files changed, 24 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/use-computed-deps.md

diff --git a/.changeset/use-computed-deps.md b/.changeset/use-computed-deps.md
new file mode 100644
index 00000000..55af64af
--- /dev/null
+++ b/.changeset/use-computed-deps.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/react': patch
+---
+
+Allow dependencies to be passed to `useComputed` hook.
diff --git a/packages/react/src/core/hooks/useDragOperation.ts b/packages/react/src/core/hooks/useDragOperation.ts
index 902c3b36..f4039912 100644
--- a/packages/react/src/core/hooks/useDragOperation.ts
+++ b/packages/react/src/core/hooks/useDragOperation.ts
@@ -4,9 +4,8 @@ import {useDragDropManager} from './useDragDropManager.ts';
 
 export function useDragOperation() {
   const manager = useDragDropManager();
-
-  const source = useComputed(() => manager?.dragOperation.source);
-  const target = useComputed(() => manager?.dragOperation.target);
+  const source = useComputed(() => manager?.dragOperation.source, [manager]);
+  const target = useComputed(() => manager?.dragOperation.target, [manager]);
 
   return {
     get source() {
diff --git a/packages/react/src/hooks/useComputed.ts b/packages/react/src/hooks/useComputed.ts
index 43f563fb..83122a02 100644
--- a/packages/react/src/hooks/useComputed.ts
+++ b/packages/react/src/hooks/useComputed.ts
@@ -1,11 +1,18 @@
+import {useMemo, useRef} from 'react';
 import {computed} from '@dnd-kit/state';
 
-import {useConstant} from './useConstant.ts';
 import {useSignal} from './useSignal.ts';
 
-export function useComputed<T = any>(compute: () => T, sync = false) {
+export function useComputed<T = any>(
+  compute: () => T,
+  dependencies: any[] = [],
+  sync = false
+) {
+  const $compute = useRef(compute);
+  $compute.current = compute;
+
   return useSignal(
-    useConstant(() => computed(compute)),
+    useMemo(() => computed(() => $compute.current()), dependencies),
     sync
   );
 }
diff --git a/packages/react/src/hooks/useSignal.ts b/packages/react/src/hooks/useSignal.ts
index 16dc57ef..782348bd 100644
--- a/packages/react/src/hooks/useSignal.ts
+++ b/packages/react/src/hooks/useSignal.ts
@@ -1,22 +1,18 @@
 import {useState} from 'react';
 import {flushSync} from 'react-dom';
-import {effect, signal, Signal} from '@dnd-kit/state';
+import {effect, Signal} from '@dnd-kit/state';
 
-import {useConstant} from './useConstant.ts';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect.ts';
 
 /** Wrap the given value in a Signal if it isn't already one, and make changes trigger a re-render. */
-export function useSignal<T = any>(signalOrValue: T, sync = false) {
-  const sig = useConstant(() =>
-    signalOrValue instanceof Signal ? signalOrValue : signal(signalOrValue)
-  ) as T extends Signal ? T : Signal<T>;
-  let val = sig.peek();
+export function useSignal<T = any>(signal: Signal<T>, sync = false) {
+  let val = signal.peek();
   const update = useState(val)[1];
 
   useIsomorphicLayoutEffect(
     () =>
       effect(() => {
-        if (val !== (val = sig.value)) {
+        if (val !== (val = signal.value)) {
           if (sync) {
             flushSync(() => update(val));
           } else {
@@ -24,7 +20,8 @@ export function useSignal<T = any>(signalOrValue: T, sync = false) {
           }
         }
       }),
-    [sync]
+    [signal, sync]
   );
-  return sig;
+
+  return signal;
 }