floppy-disk 3.0.0 → 3.1.0-beta.1

package/README.md

@@ -5,8 +5,6 @@ A lightweight, simple, and powerful state management library.
 This library was highly-inspired by [Zustand](https://www.npmjs.com/package/zustand) and [TanStack-Query](https://tanstack.com/query), they're awesome state manager.
 FloppyDisk provides a very similar developer experience (DX), while introducing additional features and a smaller bundle size.
 
-Comparison: https://github.com/afiiif/floppy-disk/tree/beta/comparison
-
 Demo: https://afiiif.github.io/floppy-disk/
 
 **Installation:**
@@ -23,7 +21,7 @@ Here's how to create and use a store:
 import { createStore } from 'floppy-disk/react';
 
 const useDigimon = createStore({
-  age: 3,
+  age: 7,
   level: 'Rookie',
 });
 ```
@@ -41,10 +39,12 @@ function MyDigimon() {
 function Control() {
   return (
     <>
-      <button onClick={() => {
-        // You can setState directly
-        useDigimon.setState(prev => ({ age: prev.age + 1 }));
-      }}>
+      <button
+        onClick={() => {
+          // You can setState directly
+          useDigimon.setState((prev) => ({ age: prev.age + 1 }));
+        }}
+      >
         Increase digimon's age
       </button>
 
@@ -66,6 +66,43 @@ const evolve = () => {
 };
 ```
 
+### Store Subscription
+
+At its core, FloppyDisk is a **pub-sub store**.
+
+You can subscribe manually:
+
+```tsx
+const unsubscribe = useMyStore.subscribe((state, prev) => {
+  console.log('New state:', state);
+});
+
+// Later
+unsubscribe();
+```
+
+FloppyDisk provides lifecycle hooks tied to subscription count.
+
+```tsx
+const useTowerDefense = createStore(
+  { archers: 3, mages: 1, barracks: 2, artillery: 1 },
+  {
+    onFirstSubscribe: () => {
+      console.log('First subscriber! We’re officially popular 🎉');
+    },
+    onSubscribe: () => {
+      console.log('New subscriber joined. Welcome aboard 🫡');
+    },
+    onUnsubscribe: () => {
+      console.log('Subscriber left... was it something I said? 😭');
+    },
+    onLastUnsubscribe: () => {
+      console.log('Everyone left. Guess I’ll just exist quietly now...');
+    },
+  },
+);
+```
+
 ### Differences from Zustand
 
 If you're coming from Zustand, this should feel very familiar.\
@@ -80,28 +117,28 @@ Key differences:
 Zustand examples:
 
 ```tsx
-const useExample1 = create(123);
+const useDate = create(new Date(2021, 01, 11));
 
-const useExample2 = create(set => ({
+const useCounter = create((set) => ({
   value: 1,
-  inc: () => set(prev => ({ value: prev.value + 1 })),
+  increment: () => set((prev) => ({ value: prev.value + 1 })),
 }));
 ```
 
 FloppyDisk equivalents:
 
 ```tsx
-const useExample1 = createStore({ value: 123 });
+const useDate = createStore({ value: new Date(2021, 01, 11) });
 
+const useCounter = createStore({ value: 1 });
+const increment = () => useCounter.setState((prev) => ({ value: prev.value + 1 }));
 // Unlike Zustand, defining actions inside the store is **discouraged** in FloppyDisk.
 // This improves tree-shakeability and keeps your store minimal.
-const useExample2 = createStore({ value: 1 });
-const inc = () => useExample2.setState(prev => ({ value: prev.value + 1 }));
 
-// However, it's still possible if you understand how closures work:
-const useExample2Alt = createStore({
+// However, it's still possible to mix actions with the state if you understand how closures work:
+const useCounterAlt = createStore({
   value: 1,
-  inc: () => useExample2Alt.setState(prev => ({ value: prev.value + 1 })),
+  increment: () => useCounterAlt.setState((prev) => ({ value: prev.value + 1 })),
 });
 ```
 
@@ -272,14 +309,11 @@ type GetPostsResponse = {
   meta: { nextCursor: string };
 };
 
-const postsQuery = createQuery<GetPostsResponse, GetPostParams>(
-  getPosts,
-  {
-    staleTime: Infinity,
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-  },
-);
+const postsQuery = createQuery<GetPostsResponse, GetPostParams>(getPosts, {
+  staleTime: Infinity,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+});
 
 function Main() {
   return <Page cursor={undefined} />;
@@ -294,12 +328,10 @@ function Page({ cursor }: { cursor?: string }) {
 
   return (
     <>
-      {data.posts.map(post => (
+      {data.posts.map((post) => (
         <PostCard key={post.id} post={post} />
       ))}
-      {data.meta.nextCursor && (
-        <LoadMore nextCursor={data.meta.nextCursor} />
-      )}
+      {data.meta.nextCursor && <LoadMore nextCursor={data.meta.nextCursor} />}
     </>
   );
 }
@@ -314,11 +346,7 @@ function LoadMore({ nextCursor }: { nextCursor?: string }) {
     return <Page cursor={nextCursor} />;
   }
 
-  return (
-    <ReachingBottomObserver
-      onReachBottom={() => setIsNextPageRequested(true)}
-    />
-  );
+  return <BottomObserver onReachBottom={() => setIsNextPageRequested(true)} />;
 }
 ```
 
@@ -337,34 +365,39 @@ Revalidating dozens of previously viewed pages rarely provides value to the user
 
 ## SSR Guidance
 
-FloppyDisk is designed primarily for **client-side [sync/async] state**.
-
-If your data is already fetched on the server (e.g. via SSR/ISR, Server Components, or Server Actions), then:
+Examples for using stores and queries in SSR with isolated data (no shared state between users).
 
-> **You most likely don't need this library.**
+### Initialize Store State from Server
 
-This is the same philosophy as TanStack Query. 💡
-
-In many cases, developers mix SSR/ISR with client-side state because they want:
-
-1. Data to be rendered into HTML on the server
-2. The ability to **revalidate it on the client**
-
-A common (but inefficient) approach is:
+```tsx
+const useCountStore = createStore({ count: 0 });
 
-- fetch on the server
-- hydrate it into a client-side cache
-- then revalidate using a query library
+function Page({ initialCount }) {
+  const { count } = useCountStore({
+    initialState: { count: initialCount }, // e.g. 3
+  });
 
-While this works, it introduces additional complexity.
+  return <>count is {count}</>; // Output: count is 3
+}
+```
 
-Instead, we encourage a simpler approach:
+### Initialize Query Data from Server
 
-> If your data is fetched on the server, revalidate it using **your framework's built-in mechanism** (e.g. Next.js route revalidation).
+```tsx
+async function MyServerComponent() {
+  const data = await getData(); // e.g. { count: 3 }
+  return <MyClientComponent initialData={data} />;
+}
 
-Because of this philosophy, FloppyDisk **does not support** hydrating server-fetched data into the client store.
+const myQuery = createQuery(getData);
+const useMyQuery = myQuery();
 
-This keeps the mental model clean:
+function MyClientComponent({ initialData }) {
+  const { data } = useMyQuery({
+    initialData: initialData,
+    // initialDataIsStale: true <-- Optional, default to false (no immediate revalidation)
+  });
 
-- server data → handled by the framework
-- client async state → handled by FloppyDisk
+  return <>count is {data.count}</>; // Output: count is 3
+}
+```

package/esm/react/create-query.d.mts

@@ -182,7 +182,33 @@ export declare const createQuery: <TData, TVariable extends Record<string, any>
      * // While loading userId=2, still show userId=1 data
      * useQuery({ id: userId }, { keepPreviousData: true });
      */ keepPreviousData?: boolean;
-}) => QueryState<TData, TError>) & {
+} & ({
+    /**
+     * Initial data used on first render (and will also update the store state right after that)
+     *
+     * If provided, `initialData` will be applied **once per query-store instance**
+     */
+    initialData: TData;
+    /**
+     * Whether the provided `initialData` should be treated as stale.
+     *
+     * @remarks
+     * - If `true`, a revalidation (refetch) will be triggered immediately.
+     * - If `false` (default), `initialData` is treated as fresh and will not be revalidated.
+     *
+     * @default false
+     *
+     * @example
+     * useQuery({
+     *   initialData: dataFromSSR,
+     *   initialDataIsStale: true, // force refetch
+     * });
+     */
+    initialDataIsStale?: boolean;
+} | {
+    initialData?: never;
+    initialDataIsStale?: never;
+})) => QueryState<TData, TError>) & {
     metadata: {
         isInvalidated?: boolean;
         promise?: Promise<QueryState<TData, TError>> | undefined;

package/esm/react/create-store.d.mts

@@ -25,4 +25,9 @@ import { type InitStoreOptions } from 'floppy-disk/vanilla';
  *
  * useMyStore.setState({ foo: 2 }); // only components using foo will re-render
  */
-export declare const createStore: <TState extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => (() => TState) & import("../vanilla.d.mts").StoreApi<TState>;
+export declare const createStore: <TState extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => ((options?: {
+    /**
+     * Initial state used on first render (and will also update the store state right after that)
+     */
+    initialState?: Partial<TState>;
+}) => TState) & import("../vanilla.d.mts").StoreApi<TState>;

package/esm/react/create-stores.d.mts

@@ -30,7 +30,14 @@ import { type InitStoreOptions } from 'floppy-disk/vanilla';
  *   return <div>{state.name}</div>;
  * }
  */
-export declare const createStores: <TState extends Record<string, any>, TKey extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => (key?: TKey) => (() => TState) & {
+export declare const createStores: <TState extends Record<string, any>, TKey extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => (key?: TKey) => ((options?: {
+    /**
+     * Initial state used on first render (and will also update the store state right after that)
+     *
+     *  If provided, `initialState` will be applied **once per store instance**
+     */
+    initialState?: Partial<TState>;
+}) => TState) & {
     delete: () => boolean;
     setState: (value: import("../vanilla.d.mts").SetState<TState>) => void;
     getState: () => TState;

package/esm/react/use-store.d.mts

@@ -4,10 +4,14 @@ export declare const getValueByPath: (obj: any, path: Path) => any;
 export declare const isPrefixPath: (candidatePrefix: Path, targetPath: Path) => boolean;
 export declare const compressPaths: (paths: Path[]) => Path[];
 export declare const useStoreStateProxy: <TState extends Record<string, any>>(storeState: TState) => readonly [TState, import("react").RefObject<Path[]>];
+export declare const NO_INITIAL_VALUE: {};
+export declare const useStoreStateWithInitializer: <TState extends Record<string, any>>(store: StoreApi<TState>, initialState?: Partial<TState>) => readonly [TState, import("react").RefObject<WeakMap<StoreApi<TState>, number>>];
 /**
  * React hook for subscribing to a store using automatic dependency tracking.
  *
  * @param store - The store instance to subscribe to
+ * @param options - Optional configuration
+ * @param options.initialState - Initial state used on first render (and will also update the store state right after that)
  *
  * @returns A proxied version of the store state
  *
@@ -17,12 +21,14 @@ export declare const useStoreStateProxy: <TState extends Record<string, any>>(st
  * - State must be treated as **immutable**:
  *   - Updates must replace objects rather than mutate them
  *   - Otherwise, changes may not be detected
- * - No selector or memoization is needed.
+ * - If provided, `initialState` will be applied **once per store instance**
  *
  * @example
  * const state = useStoreState(store);
  * return <div>{state.user.name}</div>;
  * // Component will only re-render if `user.name` changes
  */
-export declare const useStoreState: <TState extends Record<string, any>>(storeState: TState, subscribe: StoreApi<TState>["subscribe"]) => TState;
+export declare const useStoreState: <TState extends Record<string, any>>(store: StoreApi<TState>, options?: {
+    initialState?: Partial<TState>;
+}) => TState;
 export {};

package/esm/react.mjs

@@ -49,11 +49,24 @@ const useStoreStateProxy = (storeState) => {
   }, [storeState]);
   return [trackedState, usedPathsRef];
 };
-const useStoreState = (storeState, subscribe) => {
-  const [trackedState, usedPathsRef] = useStoreStateProxy(storeState);
+const NO_INITIAL_VALUE = {};
+const useStoreStateWithInitializer = (store, initialState = NO_INITIAL_VALUE) => {
+  const initiatedAt = useRef(new WeakMap([[store, 0]]));
+  useIsomorphicLayoutEffect(() => {
+    if (initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store)) return;
+    store.setState(initialState);
+    initiatedAt.current.set(store, Date.now());
+  }, [store, initialState]);
+  const storeState = store.getState();
+  const finalState = initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store) ? storeState : { ...storeState, ...initialState };
+  return [finalState, initiatedAt];
+};
+const useStoreState = (store, options = {}) => {
+  const [state] = useStoreStateWithInitializer(store, options.initialState);
+  const [trackedState, usedPathsRef] = useStoreStateProxy(state);
   const [, reRender] = useState({});
   useIsomorphicLayoutEffect(() => {
-    return subscribe((nextState, prevState, changedKeys) => {
+    return store.subscribe((nextState, prevState, changedKeys) => {
       const paths = compressPaths(usedPathsRef.current);
       for (const path of paths) {
         const rootKey = path[0];
@@ -63,13 +76,13 @@ const useStoreState = (storeState, subscribe) => {
         if (!Object.is(prevVal, nextVal)) return reRender({});
       }
     });
-  }, [subscribe]);
+  }, [store]);
   return trackedState;
 };
 
 const createStore = (initialState, options) => {
   const store = initStore(initialState, options);
-  const useStore = () => useStoreState(store.getState(), store.subscribe);
+  const useStore = (options2) => useStoreState(store, options2);
   return Object.assign(useStore, store);
 };
 
@@ -84,7 +97,7 @@ const createStores = (initialState, options) => {
       store = initStore(initialState, options);
       stores.set(keyHash, store);
     }
-    const useStore = () => useStoreState(store.getState(), store.subscribe);
+    const useStore = (options2) => useStoreState(store, options2);
     return Object.assign(useStore, {
       ...store,
       delete: () => {
@@ -367,8 +380,20 @@ const createQuery = (queryFn, options = {}) => {
       internals.set(store, configureInternals(store, variable, variableHash));
     }
     const useStore = (options2 = {}) => {
-      const { revalidateOnMount = true, keepPreviousData } = options2;
-      const storeState = store.getState();
+      const {
+        initialData = NO_INITIAL_VALUE,
+        initialDataIsStale = false,
+        revalidateOnMount = true,
+        keepPreviousData
+      } = options2;
+      const [storeState, initialDataInitiatedAt] = useStoreStateWithInitializer(
+        store,
+        initialData === NO_INITIAL_VALUE ? void 0 : {
+          state: "SUCCESS",
+          isSuccess: true,
+          data: initialData
+        }
+      );
       const prevState = useRef({});
       let storeStateToBeUsed = storeState;
       if (storeState.state !== "INITIAL") {
@@ -404,8 +429,16 @@ const createQuery = (queryFn, options = {}) => {
         });
       }, [store]);
       useIsomorphicLayoutEffect(() => {
-        if (revalidateOnMount !== false) revalidate(store, variable, false);
-      }, [store, revalidateOnMount]);
+        if (revalidateOnMount !== false) {
+          if (!initialDataIsStale) {
+            const dataInitiatedAt = initialDataInitiatedAt.current.get(store);
+            if (dataInitiatedAt && dataInitiatedAt + staleTime > Date.now()) {
+              return;
+            }
+          }
+          revalidate(store, variable, false);
+        }
+      }, [store, revalidateOnMount, initialDataIsStale]);
       if (keepPreviousData) {
         !!trackedState.error;
       }
@@ -483,7 +516,7 @@ const createMutation = (mutationFn, options = {}) => {
   let ongoingPromise;
   const resolveFns = /* @__PURE__ */ new Set([]);
   const store = initStore(initialState, options);
-  const useStore = () => useStoreState(store.getState(), store.subscribe);
+  const useStore = () => useStoreState(store);
   const execute = (variable) => {
     let currentResolveFn;
     const stateBeforeExecute = store.getState();

package/esm/vanilla/store.d.mts

@@ -51,6 +51,12 @@ export type InitStoreOptions<TState extends Record<string, any>> = {
     onSubscribe?: (state: TState, store: StoreApi<TState>) => void;
     onUnsubscribe?: (state: TState, store: StoreApi<TState>) => void;
     onLastUnsubscribe?: (state: TState, store: StoreApi<TState>) => void;
+    /**
+     * Called whenever the state changes, without counting as a subscriber.
+     * Acts like a "spy" on state updates.
+     * Useful for devtools, logging, or debugging state changes.
+     */
+    onStateChange?: (state: TState, prevState: TState, changedKeys: Array<keyof TState>) => void;
     /**
      * By default, calling `setState` on the server is disallowed to prevent shared state across requests.
      * Set this to `true` only if you explicitly intend to mutate state during server execution.

package/esm/vanilla.mjs

@@ -35,6 +35,7 @@ const initStore = (initialState, options = {}) => {
     onSubscribe = noop,
     onUnsubscribe = noop,
     onLastUnsubscribe = noop,
+    onStateChange = noop,
     allowSetStateServerSide = false
   } = options;
   const subscribers = /* @__PURE__ */ new Set();
@@ -68,6 +69,7 @@ const initStore = (initialState, options = {}) => {
     }
     if (changedKeys.length === 0) return;
     state = { ...prevState, ...newValue };
+    onStateChange(state, prevState, changedKeys);
     [...subscribers].forEach((subscriber) => subscriber(state, prevState, changedKeys));
   };
   const storeApi = {

package/package.json

@@ -2,7 +2,10 @@
   "name": "floppy-disk",
   "description": "Lightweight, simple, and powerful state management library",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.1.0-beta.1",
+  "publishConfig": {
+    "tag": "beta"
+  },
   "keywords": [
     "utilities",
     "store",

package/react/create-query.d.ts

@@ -182,7 +182,33 @@ export declare const createQuery: <TData, TVariable extends Record<string, any>
      * // While loading userId=2, still show userId=1 data
      * useQuery({ id: userId }, { keepPreviousData: true });
      */ keepPreviousData?: boolean;
-}) => QueryState<TData, TError>) & {
+} & ({
+    /**
+     * Initial data used on first render (and will also update the store state right after that)
+     *
+     * If provided, `initialData` will be applied **once per query-store instance**
+     */
+    initialData: TData;
+    /**
+     * Whether the provided `initialData` should be treated as stale.
+     *
+     * @remarks
+     * - If `true`, a revalidation (refetch) will be triggered immediately.
+     * - If `false` (default), `initialData` is treated as fresh and will not be revalidated.
+     *
+     * @default false
+     *
+     * @example
+     * useQuery({
+     *   initialData: dataFromSSR,
+     *   initialDataIsStale: true, // force refetch
+     * });
+     */
+    initialDataIsStale?: boolean;
+} | {
+    initialData?: never;
+    initialDataIsStale?: never;
+})) => QueryState<TData, TError>) & {
     metadata: {
         isInvalidated?: boolean;
         promise?: Promise<QueryState<TData, TError>> | undefined;

package/react/create-store.d.ts

@@ -25,4 +25,9 @@ import { type InitStoreOptions } from 'floppy-disk/vanilla';
  *
  * useMyStore.setState({ foo: 2 }); // only components using foo will re-render
  */
-export declare const createStore: <TState extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => (() => TState) & import("../vanilla.ts").StoreApi<TState>;
+export declare const createStore: <TState extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => ((options?: {
+    /**
+     * Initial state used on first render (and will also update the store state right after that)
+     */
+    initialState?: Partial<TState>;
+}) => TState) & import("../vanilla.ts").StoreApi<TState>;

package/react/create-stores.d.ts

@@ -30,7 +30,14 @@ import { type InitStoreOptions } from 'floppy-disk/vanilla';
  *   return <div>{state.name}</div>;
  * }
  */
-export declare const createStores: <TState extends Record<string, any>, TKey extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => (key?: TKey) => (() => TState) & {
+export declare const createStores: <TState extends Record<string, any>, TKey extends Record<string, any>>(initialState: TState, options?: InitStoreOptions<TState>) => (key?: TKey) => ((options?: {
+    /**
+     * Initial state used on first render (and will also update the store state right after that)
+     *
+     *  If provided, `initialState` will be applied **once per store instance**
+     */
+    initialState?: Partial<TState>;
+}) => TState) & {
     delete: () => boolean;
     setState: (value: import("../vanilla.ts").SetState<TState>) => void;
     getState: () => TState;

package/react/use-store.d.ts

@@ -4,10 +4,14 @@ export declare const getValueByPath: (obj: any, path: Path) => any;
 export declare const isPrefixPath: (candidatePrefix: Path, targetPath: Path) => boolean;
 export declare const compressPaths: (paths: Path[]) => Path[];
 export declare const useStoreStateProxy: <TState extends Record<string, any>>(storeState: TState) => readonly [TState, import("react").RefObject<Path[]>];
+export declare const NO_INITIAL_VALUE: {};
+export declare const useStoreStateWithInitializer: <TState extends Record<string, any>>(store: StoreApi<TState>, initialState?: Partial<TState>) => readonly [TState, import("react").RefObject<WeakMap<StoreApi<TState>, number>>];
 /**
  * React hook for subscribing to a store using automatic dependency tracking.
  *
  * @param store - The store instance to subscribe to
+ * @param options - Optional configuration
+ * @param options.initialState - Initial state used on first render (and will also update the store state right after that)
  *
  * @returns A proxied version of the store state
  *
@@ -17,12 +21,14 @@ export declare const useStoreStateProxy: <TState extends Record<string, any>>(st
  * - State must be treated as **immutable**:
  *   - Updates must replace objects rather than mutate them
  *   - Otherwise, changes may not be detected
- * - No selector or memoization is needed.
+ * - If provided, `initialState` will be applied **once per store instance**
  *
  * @example
  * const state = useStoreState(store);
  * return <div>{state.user.name}</div>;
  * // Component will only re-render if `user.name` changes
  */
-export declare const useStoreState: <TState extends Record<string, any>>(storeState: TState, subscribe: StoreApi<TState>["subscribe"]) => TState;
+export declare const useStoreState: <TState extends Record<string, any>>(store: StoreApi<TState>, options?: {
+    initialState?: Partial<TState>;
+}) => TState;
 export {};

package/react.js

@@ -51,11 +51,24 @@ const useStoreStateProxy = (storeState) => {
   }, [storeState]);
   return [trackedState, usedPathsRef];
 };
-const useStoreState = (storeState, subscribe) => {
-  const [trackedState, usedPathsRef] = useStoreStateProxy(storeState);
+const NO_INITIAL_VALUE = {};
+const useStoreStateWithInitializer = (store, initialState = NO_INITIAL_VALUE) => {
+  const initiatedAt = react.useRef(new WeakMap([[store, 0]]));
+  useIsomorphicLayoutEffect(() => {
+    if (initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store)) return;
+    store.setState(initialState);
+    initiatedAt.current.set(store, Date.now());
+  }, [store, initialState]);
+  const storeState = store.getState();
+  const finalState = initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store) ? storeState : { ...storeState, ...initialState };
+  return [finalState, initiatedAt];
+};
+const useStoreState = (store, options = {}) => {
+  const [state] = useStoreStateWithInitializer(store, options.initialState);
+  const [trackedState, usedPathsRef] = useStoreStateProxy(state);
   const [, reRender] = react.useState({});
   useIsomorphicLayoutEffect(() => {
-    return subscribe((nextState, prevState, changedKeys) => {
+    return store.subscribe((nextState, prevState, changedKeys) => {
       const paths = compressPaths(usedPathsRef.current);
       for (const path of paths) {
         const rootKey = path[0];
@@ -65,13 +78,13 @@ const useStoreState = (storeState, subscribe) => {
         if (!Object.is(prevVal, nextVal)) return reRender({});
       }
     });
-  }, [subscribe]);
+  }, [store]);
   return trackedState;
 };
 
 const createStore = (initialState, options) => {
   const store = vanilla.initStore(initialState, options);
-  const useStore = () => useStoreState(store.getState(), store.subscribe);
+  const useStore = (options2) => useStoreState(store, options2);
   return Object.assign(useStore, store);
 };
 
@@ -86,7 +99,7 @@ const createStores = (initialState, options) => {
       store = vanilla.initStore(initialState, options);
       stores.set(keyHash, store);
     }
-    const useStore = () => useStoreState(store.getState(), store.subscribe);
+    const useStore = (options2) => useStoreState(store, options2);
     return Object.assign(useStore, {
       ...store,
       delete: () => {
@@ -369,8 +382,20 @@ const createQuery = (queryFn, options = {}) => {
       internals.set(store, configureInternals(store, variable, variableHash));
     }
     const useStore = (options2 = {}) => {
-      const { revalidateOnMount = true, keepPreviousData } = options2;
-      const storeState = store.getState();
+      const {
+        initialData = NO_INITIAL_VALUE,
+        initialDataIsStale = false,
+        revalidateOnMount = true,
+        keepPreviousData
+      } = options2;
+      const [storeState, initialDataInitiatedAt] = useStoreStateWithInitializer(
+        store,
+        initialData === NO_INITIAL_VALUE ? void 0 : {
+          state: "SUCCESS",
+          isSuccess: true,
+          data: initialData
+        }
+      );
       const prevState = react.useRef({});
       let storeStateToBeUsed = storeState;
       if (storeState.state !== "INITIAL") {
@@ -406,8 +431,16 @@ const createQuery = (queryFn, options = {}) => {
         });
       }, [store]);
       useIsomorphicLayoutEffect(() => {
-        if (revalidateOnMount !== false) revalidate(store, variable, false);
-      }, [store, revalidateOnMount]);
+        if (revalidateOnMount !== false) {
+          if (!initialDataIsStale) {
+            const dataInitiatedAt = initialDataInitiatedAt.current.get(store);
+            if (dataInitiatedAt && dataInitiatedAt + staleTime > Date.now()) {
+              return;
+            }
+          }
+          revalidate(store, variable, false);
+        }
+      }, [store, revalidateOnMount, initialDataIsStale]);
       if (keepPreviousData) {
         !!trackedState.error;
       }
@@ -485,7 +518,7 @@ const createMutation = (mutationFn, options = {}) => {
   let ongoingPromise;
   const resolveFns = /* @__PURE__ */ new Set([]);
   const store = vanilla.initStore(initialState, options);
-  const useStore = () => useStoreState(store.getState(), store.subscribe);
+  const useStore = () => useStoreState(store);
   const execute = (variable) => {
     let currentResolveFn;
     const stateBeforeExecute = store.getState();

package/vanilla/store.d.ts

@@ -51,6 +51,12 @@ export type InitStoreOptions<TState extends Record<string, any>> = {
     onSubscribe?: (state: TState, store: StoreApi<TState>) => void;
     onUnsubscribe?: (state: TState, store: StoreApi<TState>) => void;
     onLastUnsubscribe?: (state: TState, store: StoreApi<TState>) => void;
+    /**
+     * Called whenever the state changes, without counting as a subscriber.
+     * Acts like a "spy" on state updates.
+     * Useful for devtools, logging, or debugging state changes.
+     */
+    onStateChange?: (state: TState, prevState: TState, changedKeys: Array<keyof TState>) => void;
     /**
      * By default, calling `setState` on the server is disallowed to prevent shared state across requests.
      * Set this to `true` only if you explicitly intend to mutate state during server execution.

package/vanilla.js

@@ -37,6 +37,7 @@ const initStore = (initialState, options = {}) => {
     onSubscribe = noop,
     onUnsubscribe = noop,
     onLastUnsubscribe = noop,
+    onStateChange = noop,
     allowSetStateServerSide = false
   } = options;
   const subscribers = /* @__PURE__ */ new Set();
@@ -70,6 +71,7 @@ const initStore = (initialState, options = {}) => {
     }
     if (changedKeys.length === 0) return;
     state = { ...prevState, ...newValue };
+    onStateChange(state, prevState, changedKeys);
     [...subscribers].forEach((subscriber) => subscriber(state, prevState, changedKeys));
   };
   const storeApi = {