Solid.js Reactive Application

Build a [Application Type] using Solid.js with fine-grained reactivity.

Requirements

1. Component Structure

Create [Number] components for:

• [Component 1] - [Purpose]
• [Component 2] - [Purpose]
• [Component 3] - [Purpose]

2. State Management

Implement reactive state using:

• Signals for primitive values (numbers, strings, booleans)
• Stores for complex objects and nested data
• Memos for computed/derived values
• Resources for async data fetching

3. Reactivity Patterns

Signals

Use createSignal() for:

• Form inputs and user interactions
• Toggle states
• Counters and numeric values

Stores

Use createStore() for:

• User profiles with nested data
• Complex form state
• Collections of related data

Computed Values

Use createMemo() for:

• Derived calculations
• Filtered/sorted lists
• Formatted display values

4. Side Effects

Implement createEffect() for:

• Logging state changes
• Syncing with localStorage
• Triggering external APIs
• DOM manipulations

5. Async Data Loading

Use createResource() with:

• Loading states
• Error handling
• Suspense boundaries
• Fallback UI during loading

6. Performance Optimization

• Fine-grained updates (only affected elements re-render)
• No virtual DOM overhead
• Minimal re-execution of code

Example Structure

import { createSignal, createStore, createMemo, createEffect, createResource, Show } from \"solid-js\"

function [ComponentName]() {
  // Signals for simple state
  const [count, setCount] = createSignal(0)
  
  // Stores for complex state
  const [userData, setUserData] = createStore({
    name: '',
    preferences: {}
  })
  
  // Computed values
  const doubled = createMemo(() => count() * 2)
  
  // Effects for side effects
  createEffect(() => {
    console.log('Count changed:', count())
  })
  
  // Async data
  const [data] = createResource(fetchData)
  
  return (
    // Component JSX
  )
}

Best Practices

• Use signals for values that change independently
• Use stores for related data that changes together
• Memoize expensive computations
• Keep effects minimal and focused
• Leverage Solid's fine-grained reactivity