Reflect logic from #754 in react (#757)

* Reflect logic from  #754 in react

* Update little-shoes-talk.md with pull request logic

Author: JoviDeCroock

.changeset/little-shoes-talk.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-react": patch
+---
+
+Reflect logic from  https://github.com/preactjs/signals/pull/754 in react

packages/react/runtime/src/index.ts

@@ -399,9 +399,13 @@ export function useComputed<T>(
 	compute: () => T,
 	options?: SignalOptions<T>
 ): ReadonlySignal<T> {
-	const $compute = useRef(compute);
-	$compute.current = compute;
-	return useMemo(() => computed<T>(() => $compute.current(), options), Empty);
+	const [$fn, $computed] = useMemo(() => {
+		const $fn = signal(compute);
+		return [$fn, computed(() => $fn.value(), options)] as const;
+	}, []);
+
+	$fn.value = compute;
+	return $computed;
 }
 
 export function useSignalEffect(

packages/react/test/shared/updates.tsx

@@ -18,6 +18,7 @@ import {
 	useContext,
 	createContext,
 	useRef,
+	useCallback,
 } from "react";
 import type { FunctionComponent } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
@@ -848,4 +849,59 @@ export function updateSignalsTests(usingTransform = false) {
 			expect(cleanup).to.have.been.calledWith("foo", isReact16 ? child : null);
 		});
 	});
+
+	describe("useComputed", () => {
+		it("should recompute and update dependency list when the compute function changes", async () => {
+			const s1 = signal(1);
+			const s2 = signal("a");
+
+			function App({ x }: { x: Signal }) {
+				const fn = useCallback(() => {
+					return x.value;
+				}, [x]);
+
+				const c = useComputed(fn);
+				return <span>{c.value}</span>;
+			}
+
+			await render(<App x={s1} />);
+			expect(scratch.textContent).to.equal("1");
+
+			await render(<App x={s2} />);
+			expect(scratch.textContent).to.equal("a");
+
+			await act(() => {
+				s1.value = 2;
+			});
+			expect(scratch.textContent).to.equal("a");
+
+			await act(() => {
+				s2.value = "b";
+			});
+			expect(scratch.textContent).to.equal("b");
+		});
+
+		it("should not recompute when the compute function doesn't change and dependency values don't change", async () => {
+			const s1 = signal(1);
+			const spy = sinon.spy();
+
+			function App({ x }: { x: Signal }) {
+				const fn = useCallback(() => {
+					spy();
+					return x.value;
+				}, [x]);
+
+				const c = useComputed(fn);
+				return <span>{c.value}</span>;
+			}
+
+			await render(<App x={s1} />);
+			expect(scratch.textContent).to.equal("1");
+			expect(spy).to.have.been.calledOnce;
+
+			await render(<App x={s1} />);
+			expect(scratch.textContent).to.equal("1");
+			expect(spy).to.have.been.calledOnce;
+		});
+	});
 }