SolidJS Reactive State Management

# SolidJS Reactive State Management for Google Antigravity

SolidJS provides fine-grained reactivity without virtual DOM. This guide covers patterns optimized for Google Antigravity IDE and Gemini 3.

## Signal-Based Store

```typescript
// src/stores/todoStore.ts
import { createSignal, createMemo } from 'solid-js';
import { createStore, produce } from 'solid-js/store';

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

function createTodoStore() {
  const [todos, setTodos] = createStore<Todo[]>([]);
  const [filter, setFilter] = createSignal<'all' | 'active' | 'completed'>('all');

  const filteredTodos = createMemo(() => {
    const currentFilter = filter();
    if (currentFilter === 'all') return todos;
    if (currentFilter === 'active') return todos.filter(t => !t.completed);
    return todos.filter(t => t.completed);
  });

  const stats = createMemo(() => ({
    total: todos.length,
    completed: todos.filter(t => t.completed).length,
    active: todos.filter(t => !t.completed).length,
  }));

  const addTodo = (text: string) => {
    setTodos(produce(todos => {
      todos.push({ id: crypto.randomUUID(), text, completed: false });
    }));
  };

  const toggleTodo = (id: string) => {
    setTodos(todo => todo.id === id, 'completed', completed => !completed);
  };

  const removeTodo = (id: string) => {
    setTodos(todos => todos.filter(t => t.id !== id));
  };

  return { todos, filter, setFilter, filteredTodos, stats, addTodo, toggleTodo, removeTodo };
}

export const todoStore = createTodoStore();
```

## Component with Reactivity

```tsx
// src/components/TodoList.tsx
import { For, Show, createSignal } from 'solid-js';
import { todoStore } from '../stores/todoStore';

export function TodoList() {
  const [newTodo, setNewTodo] = createSignal('');

  const handleSubmit = (e: Event) => {
    e.preventDefault();
    const text = newTodo().trim();
    if (text) {
      todoStore.addTodo(text);
      setNewTodo('');
    }
  };

  return (
    <div class="max-w-md mx-auto p-4">
      <form onSubmit={handleSubmit} class="flex gap-2 mb-4">
        <input type="text" value={newTodo()} onInput={(e) => setNewTodo(e.currentTarget.value)} placeholder="What needs to be done?" class="flex-1 px-4 py-2 border rounded" />
        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Add</button>
      </form>

      <ul class="space-y-2">
        <For each={todoStore.filteredTodos()}>
          {(todo) => (
            <li class="flex items-center gap-2 p-2 bg-gray-50 rounded">
              <input type="checkbox" checked={todo.completed} onChange={() => todoStore.toggleTodo(todo.id)} />
              <span class={todo.completed ? 'line-through text-gray-400' : ''}>{todo.text}</span>
              <button onClick={() => todoStore.removeTodo(todo.id)} class="ml-auto text-red-500">×</button>
            </li>
          )}
        </For>
      </ul>

      <Show when={todoStore.stats().active > 0}>
        <p class="mt-4 text-sm text-gray-500">{todoStore.stats().active} items left</p>
      </Show>
    </div>
  );
}
```

## Resource for Async Data

```tsx
// src/components/UserProfile.tsx
import { createResource, Suspense, Show } from 'solid-js';

async function fetchUser(id: string) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error('Failed');
  return response.json();
}

export function UserProfile(props: { userId: string }) {
  const [user, { refetch, mutate }] = createResource(() => props.userId, fetchUser);

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Show when={user()}>
        {(userData) => (
          <div class="p-4 border rounded">
            <img src={userData().avatar} alt={userData().name} class="w-16 h-16 rounded-full" />
            <h2 class="text-xl font-bold">{userData().name}</h2>
            <p class="text-gray-600">{userData().email}</p>
          </div>
        )}
      </Show>
    </Suspense>
  );
}
```

## Best Practices

1. **Fine-Grained Reactivity**: Signals update only what changes
2. **Stores**: Use for complex nested state
3. **Memos**: Derive computed values
4. **Resources**: Handle async declaratively
5. **Control Flow**: For, Show, Switch
6. **No Virtual DOM**: Direct DOM updates

Google Antigravity's Gemini 3 understands SolidJS reactivity and generates optimized components.