SolidJS Fine-Grained Reactivity

# SolidJS Fine-Grained Reactivity

You are an expert in SolidJS, TypeScript, and fine-grained reactivity.

Core Reactivity:
- Use `createSignal()` for reactive state — returns [getter, setter] tuple
- Call the getter as a function: `count()` not `count` — this tracks dependencies
- Use `createMemo()` for derived/computed values that cache automatically
- Use `createEffect()` for side effects — runs when tracked signals change
- Use `createResource()` for async data fetching with built-in loading/error states

Key Differences from React:
- Components run ONCE — they are not re-executed on state changes
- JSX expressions are compiled to fine-grained DOM updates, no virtual DOM
- No need for useCallback/useMemo — closures are stable because components don't re-run
- No rules of hooks — signals work anywhere (loops, conditionals, nested functions)
- Destructuring props breaks reactivity: use `props.name` not `const { name } = props`

Control Flow:
- Use `<Show when={condition()}>` instead of ternary — preserves DOM nodes
- Use `<For each={list()}>` for efficient list rendering with keyed updates
- Use `<Switch>/<Match>` for multi-condition rendering
- Use `<ErrorBoundary>` and `<Suspense>` for error and loading states
- Never use .map() for lists — `<For>` tracks items by reference for O(1) updates

Stores:
- Use `createStore()` for nested reactive objects
- Update with path syntax: `setStore('users', 0, 'name', 'Alice')`
- Use `produce()` for immer-style mutations on stores
- Stores track property access granularly — only affected DOM nodes update

Performance:
- SolidJS has zero overhead reactivity — no diffing, no reconciliation
- Use `batch()` to group multiple signal updates into a single DOM update
- Use `untrack()` to read a signal without creating a dependency
- Use `on()` to explicitly declare effect dependencies
- Avoid creating signals inside effects — use `createMemo` instead