fix: useSet should stable (#129)

.changeset/ninety-deers-nail.md

@@ -0,0 +1,5 @@
+---
+'ccstate-react': minor
+---
+
+fix: useSet should useCallback to keep stable

packages/react/src/__tests__/get-and-set.test.tsx

@@ -260,3 +260,35 @@ describe('react', () => {
     expect(store.getSubscribeGraph()).toHaveLength(0);
   });
 });
+
+it('useSet should be stable', () => {
+  const count$ = state(0);
+
+  function Container() {
+    const count = useGet(count$);
+    return <Foo count={count} />;
+  }
+
+  function Foo({ count }: { count: number }) {
+    const setCount = useSet(count$);
+
+    return (
+      <>
+        count: {count}
+        <RenderCounter setCount={setCount} />
+      </>
+    );
+  }
+
+  const trace = vi.fn();
+  function RenderCounter({ setCount }: { setCount: (val: number) => void }) {
+    trace(setCount);
+    setCount(1);
+    return <div>Render</div>;
+  }
+
+  render(<Container />);
+
+  expect(trace).toHaveBeenCalledTimes(2);
+  expect(trace.mock.calls[0][0]).toBe(trace.mock.calls[1][0]);
+});

packages/react/src/useSet.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useStore } from './provider';
 import type { Command, State, StateArg } from 'ccstate';
 
@@ -13,15 +14,14 @@ export function useSet<T, CommandArgs extends unknown[]>(
 ): ValueSetter<T> | CommandInvoker<T, CommandArgs> {
   const store = useStore();
 
-  if ('write' in signal) {
-    return (...args: CommandArgs): T => {
-      const ret = store.set(signal, ...args);
-
-      return ret;
-    };
-  }
-
-  return (value: StateArg<T>) => {
-    store.set(signal, value);
-  };
+  return useCallback(
+    'write' in signal
+      ? (...args: CommandArgs): T => {
+          return store.set(signal, ...args);
+        }
+      : (value: StateArg<T>) => {
+          store.set(signal, value);
+        },
+    [store, signal],
+  );
 }