diff --git a/index.d.ts b/index.d.ts index ec5cf17..55a5301 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,5 @@ import type { Store, StoreValue } from 'nanostores' +import type { DependencyList } from 'react' type StoreKeys = T extends { setKey: (k: infer K, v: any) => unknown } ? K @@ -9,6 +10,13 @@ export interface UseStoreOptions { * Will re-render components only on specific key changes. */ keys?: StoreKeys[] + /** + * @default + * ```ts + * [store, options.keys] + * ``` + */ + deps?: DependencyList } /** diff --git a/index.js b/index.js index 53d7170..26549b6 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,23 @@ import { listenKeys } from 'nanostores' -import { useCallback, useSyncExternalStore } from 'react' +import { useCallback, useRef, useSyncExternalStore } from 'react' + +export function useStore(store, { keys, deps = [store, keys] } = {}) { + let snapshotRef = useRef() + snapshotRef.current = store.get() -export function useStore(store, opts = {}) { let subscribe = useCallback( onChange => - opts.keys - ? listenKeys(store, opts.keys, onChange) - : store.listen(onChange), - [opts.keys, store] + keys?.length > 0 + ? listenKeys(store, keys, emit(snapshotRef, onChange)) + : store.listen(emit(snapshotRef, onChange)), + deps ) - - let get = store.get.bind(store) + let get = () => snapshotRef.current return useSyncExternalStore(subscribe, get, get) } + +let emit = (snapshotRef, onChange) => value => { + snapshotRef.current = value + onChange() +} diff --git a/package.json b/package.json index aeff499..0c2d7ee 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ "index.js": "{ useStore }", "nanostores": "{ map, computed }" }, - "limit": "871 B" + "limit": "901 B" } ] }