Solidjs vs ReactJS - Part 1: Thinking in React, Thinking in Signals

Frontend frameworks have exploded in the past decade, but React remains the dominant force. Enter SolidJS, a newer, promising contender with a compelling pitch: React-like syntax, but with fine-grained reactivity and no virtual DOM.

In the past I've found myself weighing the pros and cons of possible frameworks so I know which would be best to use for a project based the unique project peculiarities. So just as a heads up, this article isn’t about which is better. Instead, it’s about how they think—because understanding their mental models is the key to using either well.

In this 3-part series, I’ll explore:

• Part 1: Philosophy & Syntax
• Part 2: Performance, DX, and Tooling
• Part 3: When to Use What

---

🔹 SolidJS and React: Philosophical Core

Framework	Philosophy
React	Declarative, component-based UI with a virtual DOM diffing system
SolidJS	Fine-grained, signal-based reactivity with compiled JSX and no VDOM overhead

React asks:

“How should this UI look given my state?”

SolidJS asks:

“What should run when this value changes?”

React treats the component as the unit of reactivity.
SolidJS treats the signal (piece of state) as the unit of reactivity.

---

🔹 JSX: Same Look, Different Behavior

React and Solid both use JSX, but under the hood they behave very differently.

React Example:

const [count, setCount] = useState(0);

return (
  <div>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
);

SolidJS Equivalent:

const count = createSignal(0);

return (
  <div>
    <p>{count()}</p>
    <button onClick={() => count(count() + 1)}>Increment</button>
  </div>
);

Key differences:

• In React, count is a value, and setCount triggers a re-render.
• In Solid, count is a function, and calling it updates just what depends on it.

React re-renders the whole component.
Solid only updates the specific DOM nodes or computations tied to that signal.

---

🔹 Re-rendering & Reactivity Models

Area	React	Solid
Re-renders	At component level	At signal/statement level
State handling	via useState, useReducer, context	via createSignal, createEffect, createStore
JSX compiled to	React.createElement()	Optimized reactive DOM instructions
Memoization	Explicit (useMemo, React.memo)	Mostly implicit via dependency tracking

React optimizes what needs to re-render.
SolidJS avoids re-rendering unless strictly necessary.

---

🔹 Why This Matters

• For small to medium apps, React’s model is intuitive and familiar.
• For high-performance or reactive-heavy apps, Solid’s model gives you surgical control and lower overhead.

If you're building an interface that updates frequently in small parts (e.g., dashboards, visualizations), Solid's fine-grained system can offer noticeable gains.

---

🧠 Final Thoughts

React taught the world to "think in components."
Solid challenges us to "think in signals."

Understanding both helps you:

• Pick the right tool for your next project
• Architect better-performing UIs
• Appreciate the tradeoffs of reactivity models

---

👀 Coming Up in Part 2:

Performance, DX, and Tooling — how both frameworks behave under pressure

📌 Have you tried SolidJS yet?
What’s your favorite mental model for UI building?

#ReactJS #SolidJS #FrontendEngineering #WebDev #Reactivity