Solid.js Reactive Primitives

# Solid.js Reactive Primitives

You are an expert in Solid.js for building high-performance reactive applications with fine-grained reactivity and no Virtual DOM.

## Key Principles
- Use createSignal for reactive state
- Use createEffect for side effects
- Use createMemo for expensive computations
- Use createResource for async data
- Leverage Show/For components for conditional rendering

## Signal Fundamentals
```tsx
import { createSignal, createEffect, createMemo, batch } from "solid-js";

function Counter() {
  // Signals are getter/setter pairs
  const [count, setCount] = createSignal(0);
  const [name, setName] = createSignal("World");
  
  // Derived/computed values with createMemo
  const doubled = createMemo(() => count() * 2);
  const greeting = createMemo(() => `Hello, ${name()}!`);
  
  // Effects run when dependencies change
  createEffect(() => {
    console.log(`Count is now: ${count()}`);
    // Dependencies are tracked automatically
  });
  
  // Batch updates for performance
  const incrementTwice = () => {
    batch(() => {
      setCount(c => c + 1);
      setCount(c => c + 1);
    });
  };
  
  return (
    <div>
      <h1>{greeting()}</h1>
      <p>Count: {count()}</p>
      <p>Doubled: {doubled()}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <button onClick={incrementTwice}>+2</button>
      <input 
        value={name()} 
        onInput={(e) => setName(e.currentTarget.value)} 
      />
    </div>
  );
}
```

## Store for Complex State
```tsx
import { createStore, produce, reconcile } from "solid-js/store";

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

function TodoApp() {
  const [todos, setTodos] = createStore<Todo[]>([]);
  const [filter, setFilter] = createSignal<"all" | "active" | "completed">("all");
  
  // Derived from store
  const filteredTodos = createMemo(() => {
    switch (filter()) {
      case "active": return todos.filter(t => !t.completed);
      case "completed": return todos.filter(t => t.completed);
      default: return todos;
    }
  });
  
  const addTodo = (text: string) => {
    setTodos(todos.length, {
      id: Date.now(),
      text,
      completed: false
    });
  };
  
  // Update with produce (Immer-like)
  const toggleTodo = (id: number) => {
    setTodos(
      todo => todo.id === id,
      produce(todo => {
        todo.completed = !todo.completed;
      })
    );
  };
  
  // Path-based updates
  const updateText = (id: number, text: string) => {
    setTodos(
      todo => todo.id === id,
      "text",
      text
    );
  };
  
  // Replace entire store (useful for API data)
  const loadTodos = async () => {
    const data = await fetch("/api/todos").then(r => r.json());
    setTodos(reconcile(data));
  };
  
  return (
    <div>
      <TodoInput onAdd={addTodo} />
      <TodoList 
        todos={filteredTodos()} 
        onToggle={toggleTodo}
        onUpdate={updateText}
      />
      <TodoFilter filter={filter()} onFilter={setFilter} />
    </div>
  );
}
```

## Async Data with createResource
```tsx
import { createResource, Suspense, ErrorBoundary } from "solid-js";

interface User {
  id: string;
  name: string;
  email: string;
}

const fetchUser = async (id: string): Promise<User> => {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error("Failed to fetch user");
  return res.json();
};

function UserProfile(props: { userId: string }) {
  // Resource tracks async data
  const [user, { refetch, mutate }] = createResource(
    () => props.userId,
    fetchUser
  );
  
  // Optimistic update
  const updateName = async (name: string) => {
    const prev = user();
    mutate(u => u && { ...u, name }); // Optimistic
    
    try {
      await fetch(`/api/users/${props.userId}`, {
        method: "PATCH",
        body: JSON.stringify({ name })
      });
    } catch {
      mutate(prev); // Rollback
    }
  };
  
  return (
    <div>
      <Show when={user.loading}>
        <p>Loading...</p>
      </Show>
      
      <Show when={user.error}>
        <p>Error: {user.error.message}</p>
        <button onClick={refetch}>Retry</button>
      </Show>
      
      <Show when={user()}>
        {(userData) => (
          <div>
            <h1>{userData().name}</h1>
            <p>{userData().email}</p>
          </div>
        )}
      </Show>
    </div>
  );
}

// With Suspense
function App() {
  return (
    <ErrorBoundary fallback={(err) => <p>Error: {err.message}</p>}>
      <Suspense fallback={<p>Loading user...</p>}>
        <UserProfile userId="123" />
      </Suspense>
    </ErrorBoundary>
  );
}
```

## Control Flow Components
```tsx
import { Show, For, Switch, Match, Index, Portal } from "solid-js";

function ControlFlowDemo() {
  const [items, setItems] = createSignal([
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" }
  ]);
  const [status, setStatus] = createSignal<"loading" | "success" | "error">("loading");
  const [showModal, setShowModal] = createSignal(false);
  
  return (
    <div>
      {/* Conditional rendering */}
      <Show 
        when={items().length > 0}
        fallback={<p>No items</p>}
      >
        <p>Found {items().length} items</p>
      </Show>
      
      {/* Keyed iteration (items can move) */}
      <For each={items()}>
        {(item, index) => (
          <div>
            {index()}: {item.name}
          </div>
        )}
      </For>
      
      {/* Index-based iteration (items dont move) */}
      <Index each={items()}>
        {(item, index) => (
          <div>{index}: {item().name}</div>
        )}
      </Index>
      
      {/* Switch/Match for multiple conditions */}
      <Switch fallback={<p>Unknown status</p>}>
        <Match when={status() === "loading"}>
          <p>Loading...</p>
        </Match>
        <Match when={status() === "success"}>
          <p>Success!</p>
        </Match>
        <Match when={status() === "error"}>
          <p>Error occurred</p>
        </Match>
      </Switch>
      
      {/* Portal for modals */}
      <Show when={showModal()}>
        <Portal mount={document.body}>
          <div class="modal-overlay">
            <div class="modal">
              <p>Modal content</p>
              <button onClick={() => setShowModal(false)}>Close</button>
            </div>
          </div>
        </Portal>
      </Show>
    </div>
  );
}
```

## Context and Providers
```tsx
import { createContext, useContext, ParentComponent } from "solid-js";

interface ThemeContextValue {
  theme: () => "light" | "dark";
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextValue>();

export const ThemeProvider: ParentComponent = (props) => {
  const [theme, setTheme] = createSignal<"light" | "dark">("light");
  
  const value: ThemeContextValue = {
    theme,
    toggleTheme: () => setTheme(t => t === "light" ? "dark" : "light")
  };
  
  return (
    <ThemeContext.Provider value={value}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error("useTheme must be within ThemeProvider");
  return context;
};
```

## Best Practices
- Always call signals as functions: count() not count
- Use createMemo for expensive computations
- Use stores for complex nested state
- Prefer Show/For over ternaries and map()
- Batch multiple signal updates when possible
- Use ErrorBoundary and Suspense for async