Zero Virtual DOM: Components Run Once as Setup Functions
- Last updated
- Prerequisites:
- React rendering model vs SolidJS reactivity
- SolidJS createSignal
- solidjs
- reactivity
- lifecycle
- signals
- compiler
- architecture
Read at your depth
The practical view
In SolidJS, **component functions execute exactly once** when they are created (mounted). They never re-render. When a signal updates via `setCount()`, the component function does *not* re-run. Instead, only the specific micro-expression or DOM node that called `count()` updates directly. Destructuring props in the function signature (`function App({ count })`) breaks reactivity because the function never re-runs to receive new prop values.
The same idea in other frameworks
Component function re-runs on every state change; requires `useMemo`/`useCallback`.Component class instantiated once; change detection runs template check passes.`<script setup>` runs once, but the internal render function re-runs with VNode diffing.Component script runs once; compiler emits surgical update blocks.Legacy vs modern
React Component Re-Render vs SolidJS Run-Once Execution
Console logs in React run on every click; in SolidJS, the component body runs once and only the DOM binding updates.
const [count, setCount] = useState(0); console.log('Rendered'); // ❌ Logs on every clickconst [count, setCount] = createSignal(0); console.log('Mounted'); // ✅ Runs ONLY ONCEInterview gotchas
Context
This is the #1 gotcha interviewers use to check if a developer understands Solid's execution model.
The mechanical answer
Because Solid components run **only once**, destructuring `props` in the function parameter (e.g. `function Card({ title })`) extracts the property's raw primitive value at the exact moment of initial setup. When the parent component passes a new `title`, the child component function does not re-run, so `title` remains frozen as its initial value. To preserve reactivity, you must access props via property access `props.title` or use `splitProps(props, [...])`.
Trap
Never write `const { name, age } = props;` in SolidJS. Always use `props.name` or helper utilities like `mergeProps` / `splitProps`.
Context
Tests understanding of closure creation in non-re-rendering frameworks.
The mechanical answer
No. `useCallback` does not exist in SolidJS because inline functions defined in the component body are instantiated only once during initial mount. They are never re-created on signal updates. `createMemo` exists only to cache expensive derived calculations, not to preserve reference equality across re-renders.
Trap
Wrapping simple event handlers or calculations in `createMemo` just for reference stability is completely unnecessary and adds overhead in Solid.