SolidJS Fine-Grained Reactivity

Build high-performance UIs with SolidJS. Uses signals, memos, effects, stores, and resources for fine-grained reactivity with no virtual DOM — ideal for granular, low-overhead updates.

This skill implements SolidJS applications using createSignal, createMemo, createEffect, createStore, and createResource. It leverages fine-grained reactivity for surgical DOM updates, builds control-flow components (For, Show, Switch), and structures async data with Suspense and resources.

When to use

Use when building a SolidJS app, modeling reactive state with signals and stores, optimizing render performance, or fetching async data with resources and Suspense.

Examples

Reactive store

Nested state with createStore

Model a todo app in SolidJS with createStore for nested items, derived counts via createMemo, and a For loop rendering the list

Async resource

Fetch with Suspense

Use createResource and Suspense in SolidJS to fetch and render a user profile with a loading fallback and error boundary