How does SolidJS reactive system work?

SolidJS uses a fine-grained reactive system without virtual DOM. Its core reactive primitives include:

1. createSignal: Creates reactive state, returns getter and setter

javascript
const [count, setCount] = createSignal(0);

1. createEffect: Creates reactive side effects, automatically tracks dependencies

javascript
createEffect(() => {
  console.log(count());
});

1. createMemo: Creates derived state, caches computed results

javascript
const doubled = createMemo(() => count() * 2);

1. createResource: Handles asynchronous data

javascript
const [data] = createResource(fetcher);

Key Advantages:

• Direct DOM manipulation, avoiding virtual DOM diff
• Compile-time optimization, zero runtime overhead
• Fine-grained updates, only updates changed nodes
• No manual dependency declaration, automatic tracking

Differences from React:

• React uses virtual DOM + re-rendering
• SolidJS uses fine-grained reactivity + direct DOM updates
• React components re-execute on every props change
• SolidJS components execute once, internal reactive updates