/web-framework-solidjs

name: web-framework-solidjs
description: SolidJS fine-grained reactivity patterns - signals, effects, memos, stores, createResource, control flow components, Suspense, SolidStart

SolidJS Patterns

> **Quick Guide:** Use `createSignal` for primitives, `createStore` for nested objects. Always call signals as functions (`count()` not `count`). Never destructure props. Use `<Show>`, `<For>`, `<Switch>` for control flow. Wrap async data in `createResource` and components in `<Suspense>`.

---

<critical_requirements>

CRITICAL: Before Using This Skill

> **All code must follow project conventions in CLAUDE.md** (kebab-case, named exports, import ordering, `import type`, named constants)

**(You MUST call signals as functions to read values - `count()` NOT `count`)**

**(You MUST NEVER destructure props - use `props.name` or `splitProps()` to preserve reactivity)**

**(You MUST use `<Show>`, `<For>`, `<Switch>` control flow components instead of ternaries and `.map()`)**

**(You MUST clean up side effects with `onCleanup()` inside effects)**

**(You MUST wrap async data fetching in `createResource` and components in `<Suspense>`)**

</critical_requirements>

---

**Auto-detection:** SolidJS, createSignal, createEffect, createMemo, createStore, createResource, createAsync, query, action, Show, For, Switch, Match, splitProps, mergeProps, onCleanup, onMount, Suspense, ErrorBoundary, solid-js, @solidjs/router, SolidStart

**When to use:**

• Building reactive UIs with fine-grained reactivity (no virtual DOM)
• Managing state with signals (primitives) and stores (nested objects)
• Creating derived values with memos
• Fetching async data with createResource
• Building full-stack apps with SolidStart

**Key patterns covered:**

• Signals, effects, and memos (core reactivity)
• Component patterns (props, splitProps, mergeProps, refs)
• Control flow components (Show, For, Index, Switch, Match)
• Stores for complex nested state
• createResource for async data fetching (plain SolidJS)
• createAsync + query for data fetching (SolidStart, recommended for Solid 2.0)
• Context for dependency injection
• Suspense and ErrorBoundary for async handling
• SolidStart patterns (server functions, query, actions)

**When NOT to use:**

• When team is deeply invested in React ecosystem
• Projects requiring extensive third-party React component libraries
• When you need React-specific features (Server Components, concurrent mode)

**Detailed Resources:**

• [examples/core.md](examples/core.md) - Signals, effects, memos, batch
• [examples/components.md](examples/components.md) - Props handling, control flow, refs, component types
• [examples/stores.md](examples/stores.md) - createStore, produce, reconcile, Context
• [examples/resources.md](examples/resources.md) - createResource, createAsync, query/action (SolidStart)
• [reference.md](reference.md) - Decision frameworks, anti-patterns, checklists

---

<philosophy>

Philosophy

SolidJS achieves exceptional performance through **fine-grained reactivity**: instead of re-rendering entire component trees like React, Solid tracks dependencies at the expression level and surgically updates only the specific DOM nodes that changed. Components run once during creation, not on every state change.

**Core principles:**

1. **Fine-grained reactivity** - Updates happen at the DOM node level, not component level 2. **Signals are functions** - Reading a signal (`count()`) subscribes to it, creating automatic dependency tracking 3. **Components run once** - The component function body executes only at creation time 4. **No virtual DOM** - Direct DOM manipulation eliminates diffing overhead 5. **Explicit reactivity** - State is explicitly reactive via `createSignal` and `createStore`

**Key mental model:**

// React: Component re-renders, recalculates everything
function Counter() {
  const [count, setCount] = useState(0);
  console.log('This runs on EVERY update'); // Re-runs
  return <span>{count}</span>; // Re-renders span
}

// Solid: Component runs once, only expressions update
function Counter() {
  const [count, setCount] = createSignal(0);
  console.log('This runs ONCE'); // Only at creation
  return <span>{count()}</span>; // Only text node updates
}

</philosophy>

---

<patterns>

Core Patterns

Pattern 1: Signals - Reactive Primitives

Signals are the foundation of Solid's reactivity. They hold a value and notify subscribers when it changes.

Basic Signals

import { createSignal } from "solid-js";

const MAX_COUNT = 100;
const INITIAL_COUNT = 0;

// createSignal returns [getter, setter]
const [count, setCount] = createSignal(INITIAL_COUNT);

// MUST call as function to read
console.log(count()); // 0

// Setting values
setCount(5);
setCount((prev) => prev + 1); // Functional update

// With TypeScript explicit types
const [user, setUser] = createSignal<User | null>(null);

**Why good:** Explicit reactivity through function calls, automatic dependency tracking, type-safe with generics, functional updates prevent stale closure bugs

Signals in Components

import { createSignal, type Component } from 'solid-js';

const Counter: Component = () => {
  const [count, setCount] = createSignal(0);

  // This console.log runs ONCE, not on every update
  console.log('Component created');

  return (
    <div>
      {/* Only this text node updates when count changes */}
      <span>Count: {count()}</span>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
};

export { Counter };

**Why good:** Component body runs once, only `{count()}` expression re-evaluates on update, minimal DOM manipulation

---

Pattern 2: Effects - Side Effects on State Changes

Effects run automatically when their tracked dependencies change.

createEffect

import { createSignal, createEffect, onCleanup } from "solid-js";

const [count, setCount] = createSignal(0);

//