SolidJS Reactive Patterns

# SolidJS Reactive Patterns for Google Antigravity IDE

Harness SolidJS's fine-grained reactivity system with Google Antigravity IDE's Gemini 3 assistance. This comprehensive guide covers signals, stores, resources, and advanced reactive patterns for building high-performance applications with minimal overhead.

## Core Reactive Primitives

```typescript
// src/components/TodoApp.tsx
import { createSignal, createMemo, createEffect, batch, untrack } from "solid-js";
import { createStore, produce } from "solid-js/store";

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

interface TodoState {
  todos: Todo[];
  filter: "all" | "active" | "completed";
}

export function TodoApp() {
  // Fine-grained store for complex state
  const [state, setState] = createStore<TodoState>({
    todos: [],
    filter: "all",
  });

  // Derived state with createMemo
  const filteredTodos = createMemo(() => {
    const todos = state.todos;
    switch (state.filter) {
      case "active":
        return todos.filter((t) => !t.completed);
      case "completed":
        return todos.filter((t) => t.completed);
      default:
        return todos;
    }
  });

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

  // Batch multiple updates for efficiency
  const addTodo = (text: string) => {
    batch(() => {
      setState("todos", (todos) => [
        ...todos,
        {
          id: Date.now(),
          text,
          completed: false,
          createdAt: new Date(),
        },
      ]);
    });
  };

  // Use produce for immutable-style updates
  const toggleTodo = (id: number) => {
    setState(
      "todos",
      (todo) => todo.id === id,
      produce((todo) => {
        todo.completed = !todo.completed;
      })
    );
  };

  // Side effects with createEffect
  createEffect(() => {
    const count = stats().active;
    // Runs only when active count changes
    document.title = `${count} items left`;
  });

  return (
    <div class="todo-app">
      <TodoInput onAdd={addTodo} />
      <TodoList todos={filteredTodos()} onToggle={toggleTodo} />
      <TodoStats stats={stats()} />
      <FilterButtons
        current={state.filter}
        onChange={(filter) => setState("filter", filter)}
      />
    </div>
  );
}
```

## Resources for Async Data

```typescript
// src/components/UserProfile.tsx
import { createResource, Suspense, ErrorBoundary, Show } from "solid-js";
import { createAsync, cache } from "@solidjs/router";

// Cache function for deduplication
const getUser = cache(async (userId: string) => {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error("Failed to fetch user");
  return response.json();
}, "user");

// Preload for route transitions
export const preloadUser = (userId: string) => getUser(userId);

export function UserProfile(props: { userId: string }) {
  // Reactive resource with refetching
  const [user, { refetch, mutate }] = createResource(
    () => props.userId,
    async (id) => {
      const response = await fetch(`/api/users/${id}`);
      return response.json();
    }
  );

  // Optimistic update
  const updateName = async (newName: string) => {
    const previous = user();
    mutate((prev) => prev && { ...prev, name: newName });
    
    try {
      await fetch(`/api/users/${props.userId}`, {
        method: "PATCH",
        body: JSON.stringify({ name: newName }),
      });
    } catch {
      mutate(previous); // Rollback on error
    }
  };

  return (
    <ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
      <Suspense fallback={<UserSkeleton />}>
        <Show when={user()} fallback={<div>User not found</div>}>
          {(userData) => (
            <div class="user-profile">
              <h1>{userData().name}</h1>
              <p>{userData().email}</p>
              <button onClick={refetch}>Refresh</button>
            </div>
          )}
        </Show>
      </Suspense>
    </ErrorBoundary>
  );
}
```

## Best Practices for Google Antigravity IDE

When developing SolidJS applications with Google Antigravity, leverage fine-grained reactivity for optimal performance. Use stores for complex nested state. Implement createMemo for derived computations. Batch related state updates to minimize re-renders. Use resources for async data with built-in loading and error states. Let Gemini 3 suggest optimal reactive patterns for your use case.

Google Antigravity excels at converting React patterns to SolidJS idioms while maintaining reactivity semantics.