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

Iboro — Tue, 26 Aug 2025 08:35:59 +0000

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

DEV Community: Iboro