ccstate-react 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # ccstate-react
 
+## 4.4.0
+
+### Minor Changes
+
+- de57ac4: fix: useSet should useCallback to keep stable
+
+### Patch Changes
+
+- ccstate@4.4.0
+
 ## 4.3.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -30,18 +30,14 @@ function useGet(atom) {
 
 function useSet(signal) {
   var store = useStore();
-  if ('write' in signal) {
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      var ret = store.set.apply(store, [signal].concat(args));
-      return ret;
-    };
-  }
-  return function (value) {
+  return react.useCallback('write' in signal ? function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return store.set.apply(store, [signal].concat(args));
+  } : function (value) {
     store.set(signal, value);
-  };
+  }, [store, signal]);
 }
 
 function _arrayLikeToArray(r, a) {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useSyncExternalStore, useState, useEffect } from 'react';
+import { createContext, useContext, useSyncExternalStore, useCallback, useState, useEffect } from 'react';
 import { getDefaultStore, command } from 'ccstate';
 
 var StoreContext = createContext(null);
@@ -28,18 +28,14 @@ function useGet(atom) {
 
 function useSet(signal) {
   var store = useStore();
-  if ('write' in signal) {
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      var ret = store.set.apply(store, [signal].concat(args));
-      return ret;
-    };
-  }
-  return function (value) {
+  return useCallback('write' in signal ? function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return store.set.apply(store, [signal].concat(args));
+  } : function (value) {
     store.set(signal, value);
-  };
+  }, [store, signal]);
 }
 
 function _arrayLikeToArray(r, a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate-react",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "CCState React Hooks",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "ccstate": "^4.3.0"
+    "ccstate": "^4.4.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -55,7 +55,7 @@
     "shx": "^0.3.4",
     "signal-timers": "^1.0.4",
     "vitest": "^2.1.8",
-    "ccstate": "^4.3.0"
+    "ccstate": "^4.4.0"
   },
   "scripts": {
     "build": "rollup -c",

package/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]);
+});

package/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],
+  );
 }