ccstate-react 4.2.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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
+
+- Updated dependencies [89d98a2]
+  - ccstate@4.3.0
+
 ## 4.2.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -28,20 +28,16 @@ function useGet(atom) {
   });
 }
 
-function useSet(atom) {
+function useSet(signal) {
   var store = useStore();
-  if ('write' in atom) {
-    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, [atom].concat(args));
-      return ret;
-    };
-  }
-  return function (value) {
-    store.set(atom, 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.d.cts

@@ -1,10 +1,12 @@
-import { State, Computed, Updater, Command, Store } from 'ccstate';
+import { State, Computed, Command, StateArg, Store } from 'ccstate';
 import * as react from 'react';
 
 declare function useGet<T>(atom: State<T> | Computed<T>): T;
 
-declare function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
-declare function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+type ValueSetter<T> = (val: StateArg<T>) => void;
+type CommandInvoker<T, CommandArgs extends unknown[]> = (...args: CommandArgs) => T;
+declare function useSet<T>(signal: State<T>): ValueSetter<T>;
+declare function useSet<T, CommandArgs extends unknown[]>(signal: Command<T, CommandArgs>): CommandInvoker<T, CommandArgs>;
 
 declare function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
 declare function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;

package/dist/index.d.ts

@@ -1,10 +1,12 @@
-import { State, Computed, Updater, Command, Store } from 'ccstate';
+import { State, Computed, Command, StateArg, Store } from 'ccstate';
 import * as react from 'react';
 
 declare function useGet<T>(atom: State<T> | Computed<T>): T;
 
-declare function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
-declare function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+type ValueSetter<T> = (val: StateArg<T>) => void;
+type CommandInvoker<T, CommandArgs extends unknown[]> = (...args: CommandArgs) => T;
+declare function useSet<T>(signal: State<T>): ValueSetter<T>;
+declare function useSet<T, CommandArgs extends unknown[]>(signal: Command<T, CommandArgs>): CommandInvoker<T, CommandArgs>;
 
 declare function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
 declare function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;

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);
@@ -26,20 +26,16 @@ function useGet(atom) {
   });
 }
 
-function useSet(atom) {
+function useSet(signal) {
   var store = useStore();
-  if ('write' in atom) {
-    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, [atom].concat(args));
-      return ret;
-    };
-  }
-  return function (value) {
-    store.set(atom, 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.2.0",
+  "version": "4.4.0",
   "description": "CCState React Hooks",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "ccstate": "^4.2.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.2.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,22 +1,27 @@
+import { useCallback } from 'react';
 import { useStore } from './provider';
-import type { Command, Updater, State } from 'ccstate';
+import type { Command, State, StateArg } from 'ccstate';
 
-export function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
-export function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
-export function useSet<T, ARGS extends unknown[]>(
-  atom: State<T> | Command<T, ARGS>,
-): ((value: T | Updater<T>) => void) | ((...args: ARGS) => T) {
-  const store = useStore();
-
-  if ('write' in atom) {
-    return (...args: ARGS): T => {
-      const ret = store.set(atom, ...args);
+type ValueSetter<T> = (val: StateArg<T>) => void;
+type CommandInvoker<T, CommandArgs extends unknown[]> = (...args: CommandArgs) => T;
 
-      return ret;
-    };
-  }
+export function useSet<T>(signal: State<T>): ValueSetter<T>;
+export function useSet<T, CommandArgs extends unknown[]>(
+  signal: Command<T, CommandArgs>,
+): CommandInvoker<T, CommandArgs>;
+export function useSet<T, CommandArgs extends unknown[]>(
+  signal: State<T> | Command<T, CommandArgs>,
+): ValueSetter<T> | CommandInvoker<T, CommandArgs> {
+  const store = useStore();
 
-  return (value: T | Updater<T>) => {
-    store.set(atom, value);
-  };
+  return useCallback(
+    'write' in signal
+      ? (...args: CommandArgs): T => {
+          return store.set(signal, ...args);
+        }
+      : (value: StateArg<T>) => {
+          store.set(signal, value);
+        },
+    [store, signal],
+  );
 }