2 min lesson

SolidJS and the signals model

Give a plain answer to "Why does const { value } = props break reactivity in a SolidJS component and what do you do instead?" Then ground it in one lesson detail.

SolidJS is named in the job description and most candidates skip it. Walking in able to reason about signals - not just recite that they exist - is a cheap, strong differentiator for this role.

This is the concept layer, so slow down before the drill. Name the mechanism first, then tie it to the role's daily decisions: what changes, what can fail and what proof would make a teammate trust the answer.

Solid's core idea: a component function runs once. There is no re-render. Reactivity lives in signals and only the exact DOM expressions that read a signal re-run when it changes. React re-runs your component and diffs a virtual tree; Solid wires the value straight to the node and skips the diff entirely.

TWO REACTIVITY MODELS, SIDE BY SIDE

Component body: React (re-render): Re-runs top to bottom on every state, parent or context change. · Solid (fine-grained): Runs exactly once at setup; the function never executes again.

diagram: compare

Step each dimension - this contrast is the high-value tell when Solid comes up.

Learn more

Full explanation

Same counter, two reactivity models

Same counter, two reactivity models.ts

// React: Counter() runs again on every click
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// Solid: Counter() runs once; only the text node updates
function Counter() {
  const [count, setCount] = createSignal(0);
  return <button onClick={() => setCount(c => c + 1)}>{count()}</button>;
}

SolidJS and the signals model

Step 1 of 2

Same counter, two reactivity models