refactor: standardize selector function parameter naming for useStore across codebase

Author: codeBelt

examples/rendering/src/AsyncDemo.tsx

@@ -5,7 +5,7 @@ import {postStore} from './stores';
 import {useRenderCount} from './useRenderCount';
 
 function LoadingIndicator() {
-  const loading = useStore(postStore, (s) => s.loading);
+  const loading = useStore(postStore, (store) => store.loading);
   const renders = useRenderCount();
   return (
     <div className="flex items-center justify-between bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2.5">
@@ -51,7 +51,7 @@ function LoadingIndicator() {
 }
 
 function ErrorDisplay() {
-  const error = useStore(postStore, (s) => s.error);
+  const error = useStore(postStore, (store) => store.error);
   const renders = useRenderCount();
   return (
     <div className="flex items-center justify-between bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2.5">
@@ -71,7 +71,7 @@ function ErrorDisplay() {
 }
 
 function PostList() {
-  const posts = useStore(postStore, (s) => s.posts);
+  const posts = useStore(postStore, (store) => store.posts);
   const renders = useRenderCount();
   return (
     <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg px-3 py-2.5">
@@ -102,7 +102,7 @@ function PostList() {
 }
 
 function PostCount() {
-  const count = useStore(postStore, (s) => s.count);
+  const count = useStore(postStore, (store) => store.count);
   const renders = useRenderCount();
   return (
     <div className="flex items-center gap-2">

examples/rendering/src/CollectionsDemo.tsx

@@ -107,8 +107,8 @@ function TagList() {
 }
 
 function CountDisplay() {
-  const userCount = useStore(collectionStore, (s) => s.userCount);
-  const tagCount = useStore(collectionStore, (s) => s.tagCount);
+  const userCount = useStore(collectionStore, (store) => store.userCount);
+  const tagCount = useStore(collectionStore, (store) => store.tagCount);
   const renders = useRenderCount();
 
   return (

examples/rendering/src/ReactiveFundamentalsDemo.tsx

@@ -12,7 +12,7 @@ const names = ['World', 'Bun', 'React', 'Store'];
 let nameIndex = 0;
 
 function CountCard() {
-  const count = useStore(counterStore, (s) => s.count);
+  const count = useStore(counterStore, (store) => store.count);
   const renders = useRenderCount();
   return (
     <div className="flex-1 flex items-center justify-between bg-indigo-500/10 border border-indigo-500/20 rounded-lg px-3 py-2.5">
@@ -30,7 +30,7 @@ function CountCard() {
 }
 
 function NameCard() {
-  const name = useStore(counterStore, (s) => s.name);
+  const name = useStore(counterStore, (store) => store.name);
   const renders = useRenderCount();
   return (
     <div className="flex-1 flex items-center justify-between bg-violet-500/10 border border-violet-500/20 rounded-lg px-3 py-2.5">
@@ -48,7 +48,7 @@ function NameCard() {
 }
 
 function BatchCard() {
-  const count = useStore(batchStore, (s) => s.count);
+  const count = useStore(batchStore, (store) => store.count);
   const renders = useRenderCount();
   return (
     <div className="flex-1 flex items-center justify-between bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2.5">

examples/rendering/src/StructuralSharingDemo.tsx

@@ -85,21 +85,33 @@ function SnapshotTree() {
       <div className="text-xs text-zinc-400 uppercase tracking-wide mb-3">
         Snapshot Reference Tree
       </div>
-      <TreeNode label="root" getValue={(s) => s}>
-        <TreeNode label=".metadata" getValue={(s) => s.metadata} depth={1} />
-        <TreeNode label=".content" getValue={(s) => s.content} depth={1}>
+      <TreeNode label="root" getValue={(store) => store}>
+        <TreeNode
+          label=".metadata"
+          getValue={(store) => store.metadata}
+          depth={1}
+        />
+        <TreeNode
+          label=".content"
+          getValue={(store) => store.content}
+          depth={1}
+        >
           <TreeNode
             label=".sections[0]"
-            getValue={(s) => s.content.sections[0]}
+            getValue={(store) => store.content.sections[0]}
             depth={2}
           />
           <TreeNode
             label=".sections[1]"
-            getValue={(s) => s.content.sections[1]}
+            getValue={(store) => store.content.sections[1]}
             depth={2}
           />
         </TreeNode>
-        <TreeNode label=".settings" getValue={(s) => s.settings} depth={1} />
+        <TreeNode
+          label=".settings"
+          getValue={(store) => store.settings}
+          depth={1}
+        />
       </TreeNode>
     </div>
   );

examples/rendering/src/stores.ts

@@ -88,7 +88,7 @@ export class DocumentStore {
   }
 
   updateSectionBody(id: number, body: string) {
-    const section = this.content.sections.find((s) => s.id === id);
+    const section = this.content.sections.find((store) => store.id === id);
     if (section) section.body = body;
   }
 

website/docs/ARCHITECTURE.md

@@ -319,7 +319,7 @@ flowchart TD
 4. For getters reading other getters (e.g., `get filteredCount() { return this.filtered.length; }`): the inner getter is itself memoized, so it returns a stable reference, which the outer getter's dep check recognizes as unchanged.
 
 **Impact on `useStore`:** The existing hook benefits automatically — no changes needed:
-- **Selector mode:** `useStore(store, s => s.filtered)` gets a stable reference from the memoized snapshot getter. `Object.is` correctly detects "no change" without `shallowEqual`.
+- **Selector mode:** `useStore(store, (store) => store.filtered)` gets a stable reference from the memoized snapshot getter. `Object.is` correctly detects "no change" without `shallowEqual`.
 - **Auto-tracked mode:** `proxy-compare`'s `isChanged` gets stable references from snapshot getters, reducing false positives.
 
 ## Layer 3: React Hook (`useStore.ts`)
@@ -331,7 +331,7 @@ flowchart TD
 ### Mode 1: Selector
 
 ```typescript
-const count = useStore(myStore, s => s.count);
+const count = useStore(myStore, (store) => store.count);
 ```
 
 ```mermaid

website/docs/TUTORIAL.md

@@ -29,7 +29,7 @@ import { useStore } from '@codebelt/classy-store/react';
 import { counterStore } from './stores';
 
 export function Counter() {
-  const count = useStore(counterStore, (s) => s.count);
+  const count = useStore(counterStore, (store) => store.count);
   return <button onClick={counterStore.increment}>Count: {count}</button>;
 }
 ```
@@ -87,7 +87,7 @@ Key points:
 ### Selector mode
 
 ```ts
-const count = useStore(counterStore, (s) => s.count);
+const count = useStore(counterStore, (store) => store.count);
 ```
 
 The selector receives an immutable snapshot and returns the slice you need. The component re-renders only when the selected value changes (compared with `Object.is`).
@@ -111,8 +111,8 @@ By default, `useStore` compares the selector's return value with `Object.is`, wh
 
 ```ts
 // ✅ No shallowEqual needed — structural sharing keeps the reference stable
-const count = useStore(todoStore, (s) => s.items.length);
-const todos = useStore(todoStore, (s) => s.items);
+const count = useStore(todoStore, (store) => store.items.length);
+const todos = useStore(todoStore, (store) => store.items);
 ```
 
 The problem shows up when your selector **derives a new value** — calling `.filter()`, `.map()`, or using object spread always allocates a new array or object, even when the underlying data hasn't changed. `Object.is` sees a different reference and triggers a re-render.
@@ -125,7 +125,7 @@ Without `shallowEqual` — `.filter()` creates a new array every time the snapsh
 import { useStore } from '@codebelt/classy-store/react';
 
 // ❌ New array reference every snapshot → unnecessary re-renders
-const active = useStore(todoStore, (s) => s.items.filter((i) => !i.done));
+const active = useStore(todoStore, (store) => store.items.filter((i) => !i.done));
 ```
 
 With `shallowEqual` — compares the array contents, not the reference:
@@ -137,7 +137,7 @@ import { useStore } from '@codebelt/classy-store/react';
 // ✅ Only re-renders when the filtered items actually change
 const active = useStore(
   todoStore,
-  (s) => s.items.filter((i) => !i.done),
+  (store) => store.items.filter((i) => !i.done),
   shallowEqual,
 );
 ```
@@ -146,10 +146,10 @@ const active = useStore(
 
 ```ts
 // ✅ No shallowEqual needed — cross-snapshot memoization keeps getter results stable
-const filtered = useStore(todoStore, (s) => s.filtered);
+const filtered = useStore(todoStore, (store) => store.filtered);
 
 // ✅ Primitives from getters also work fine
-const remaining = useStore(todoStore, (s) => s.remaining);
+const remaining = useStore(todoStore, (store) => store.remaining);
 ```
 
 `shallowEqual` is only needed when the **selector itself** derives a new value (via `.filter()`, `.map()`, object spread, etc.) — not when selecting a getter that does the derivation internally.
@@ -250,7 +250,7 @@ docStore.sections[0].body = 'Updated intro';
 
 While modifying nested properties directly through the proxy works, the same best practice applies here: prefer store methods over inline mutations. When nested updates are scattered across components, it becomes difficult to trace how deeply nested state changes. Methods give you a single place to look.
 
-Structural sharing means that when you mutate `metadata.title`, the snapshot for `sections` is reused from the previous snapshot (same reference). A component selecting `s => s.sections` won't re-render because its selected value hasn't changed.
+Structural sharing means that when you mutate `metadata.title`, the snapshot for `sections` is reused from the previous snapshot (same reference). A component selecting `(store) => store.sections` won't re-render because its selected value hasn't changed.
 
 ## Collections
 
@@ -365,7 +365,7 @@ class PostStore {
 }
 ```
 
-This means a component using `useStore(postStore, s => s.loading)` will re-render twice: once when loading starts, once when it ends. That's the correct behavior.
+This means a component using `useStore(postStore, (store) => store.loading)` will re-render twice: once when loading starts, once when it ends. That's the correct behavior.
 
 ## Tips & Gotchas
 
@@ -416,7 +416,7 @@ class Counter {
 }
 
 // ✅ Selector mode: no re-render (Object.is sees same count value)
-const count = useStore(counterStore, (s) => s.count);
+const count = useStore(counterStore, (store) => store.count);
 
 // ⚠️ Auto-tracked mode: re-renders (snapshot reference changed)
 const snap = useStore(counterStore);

website/docs/index.md

@@ -73,7 +73,7 @@ import { useStore } from '@codebelt/classy-store/react';
 
 // Selector mode: explicit control over what triggers re-renders
 function TodoCount() {
-  const remaining = useStore(todoStore, s => s.remaining);
+  const remaining = useStore(todoStore, (store) => store.remaining);
   return <span>{remaining} left</span>;
 }
 
@@ -116,9 +116,9 @@ React hook that subscribes to store changes via `useSyncExternalStore`.
 **Selector mode:**
 
 ```typescript
-const count = useStore(myStore, s => s.count);
-const user = useStore(myStore, s => s.user);
-const items = useStore(myStore, s => s.items);
+const count = useStore(myStore, (store) => store.count);
+const user = useStore(myStore, (store) => store.user);
+const items = useStore(myStore, (store) => store.items);
 ```
 
 The selector receives an immutable snapshot. Re-renders only when the selected value changes (via `Object.is` by default, or a custom `isEqual`).
@@ -139,9 +139,9 @@ Returns a tracking proxy. Properties your component reads are automatically trac
 import { shallowEqual } from '@codebelt/classy-store';
 import { useStore } from '@codebelt/classy-store/react';
 
-const userData = useStore(myStore, s => ({
-  name: s.user.name,
-  role: s.user.role,
+const userData = useStore(myStore, (store) => ({
+  name: store.user.name,
+  role: store.user.role,
 }), shallowEqual);
 ```
 
@@ -212,7 +212,7 @@ class UserStore {
 const userStore = createClassyStore(new UserStore());
 
 function UserList() {
-  const snap = useStore(userStore, s => [...s.users.entries()]);
+  const snap = useStore(userStore, (store) => [...store.users.entries()]);
   return (
     <ul>
       {snap.map(([id, user]) => (
@@ -244,7 +244,7 @@ class TagStore {
 const tagStore = createClassyStore(new TagStore());
 
 function TagList() {
-  const tags = useStore(tagStore, s => [...s.tags]);
+  const tags = useStore(tagStore, (store) => [...store.tags]);
   return tags.map(tag => <span key={tag}>{tag}</span>);
 }
 ```
@@ -373,8 +373,8 @@ const authStore = createClassyStore(new AuthStore());
 const uiStore = createClassyStore(new UiStore());
 
 function Header() {
-  const user = useStore(authStore, s => s.currentUser);
-  const theme = useStore(uiStore, s => s.theme);
+  const user = useStore(authStore, (store) => store.currentUser);
+  const theme = useStore(uiStore, (store) => store.theme);
   return <header className={theme}>{user?.name}</header>;
 }
 ```
@@ -432,7 +432,7 @@ const settingsStore = createClassyStore(new SettingsStore());
 
 // Only re-renders when push notification setting changes
 function PushToggle() {
-  const push = useStore(settingsStore, s => s.settings.notifications.push);
+  const push = useStore(settingsStore, (store) => store.settings.notifications.push);
   return <Switch checked={push} onChange={() => settingsStore.togglePush()} />;
 }
 ```
@@ -488,7 +488,7 @@ class Store {
 ```typescript
 // Stable reference across re-renders when items/filter haven't changed.
 // No shallowEqual required!
-const filtered = useStore(myStore, s => s.filtered);
+const filtered = useStore(myStore, (store) => store.filtered);
 ```
 
 ### Working with Date and RegExp

website/src/pages/index.tsx

@@ -21,7 +21,7 @@ const counterStore = store(new CounterStore());
 
 // 3. Use it in React with automatic updates
 function Counter() {
-  const count = useStore(counterStore, (s) => s.count);
+  const count = useStore(counterStore, (store) => store.count);
   return (
     <button onClick={() => counterStore.increment()}>
       Count is {count}