· react / solidjs / javascript

React vs SolidJS 2026: Fine-Grained Reactivity Quan Trọng

Solid vượt React về hiệu năng DOM thuần — 7× nhanh hơn ở swap, bundle nhỏ hơn 11×. React thắng về hệ sinh thái, tuyển dụng và độ trưởng thành meta-framework.

Bởi

2.017 từ · 11 phút đọc

Solid nhanh hơn React một cách rõ ràng — và React Compiler không thay đổi điều đó. Nếu bạn đang xây dựng giao diện có nhiều dữ liệu, thao tác swap liên tục, và kích thước bundle là yếu tố thực sự quan trọng, Solid là lựa chọn tốt hơn. Nếu bạn đang tuyển dụng developer, cần thư viện component đã trưởng thành, hoặc đang xây dựng theo hướng server-first, React vẫn là lựa chọn mặc định áp đảo — và khoảng cách đó chưa có dấu hiệu thu hẹp trong tương lai gần.

Sự lựa chọn thực ra rõ ràng hơn những tranh luận trong cộng đồng: hãy chọn mô hình reactivity phù hợp với bài toán, chứ không phải framework nào có nhiều buổi talk hội nghị nhất.

Bài này dành cho ai

Các developer React đang cân nhắc có nên dùng SolidJS cho một ứng dụng single-page mới vào năm 2026 hay không. Bài so sánh này ít hữu ích nếu bạn đang xây dựng site server-rendered (Next.js chưa có đối thủ xứng tầm ở đây), làm việc trong team chưa có kinh nghiệm Solid, hoặc cần thư viện component accessible đã ổn định ngay từ ngày đầu.

Những gì chúng tôi kiểm tra

React Hooks: 19.2.0 (phát hành ngày 1 tháng 10 năm 2025)
React Compiler: 1.0 (phát hành ngày 7 tháng 10 năm 2025), kết hợp với React 19
SolidJS: 1.9.3 (bản stable 1.x)

Dữ liệu benchmark lấy từ js-framework-benchmark, webdriver-ts/results.json. Tất cả các con số là thời gian trung vị tính bằng millisecond; thấp hơn là tốt hơn. Thông số máy lấy từ repository benchmark. Kích thước bundle là bundle của app js-framework-benchmark — không phải npm package thuần — đây mới là so sánh trung thực cho code thực tế được ship.

Mô hình reactivity

React chạy lại toàn bộ hàm component mỗi khi state thay đổi và so sánh cây virtual DOM kết quả với cây trước đó. Bộ reconciler VDOM quyết định điều gì thực sự thay đổi trong DOM thật. Mô hình này dễ đoán và dễ debug. Tuy nhiên, về mặt cấu trúc, nó tốn kém cho những thao tác tác động đến nhiều node không liên quan.

Solid không có virtual DOM. Khi một signal thay đổi, chỉ computation nào đọc signal đó mới chạy lại — không có gì khác. Ryan Carniato, tác giả của Solid, đã nói chính xác: “Whenever the signal is executed the wrapping function detects it and automatically subscribes to it.” Không cần dependency array. Không có stale closure. Không phải chạy lại component để phát hiện điều gì đã thay đổi.

React Compiler (1.0, stable từ tháng 10 năm 2025) tự động hóa việc memoization — các lời gọi useMemo và useCallback mà trước đây developer phải viết tay. Điều đó thực sự hữu ích. Nhưng nó không thay đổi những gì được thực thi. Compiler tối ưu hóa memo boundary; bộ reconciler vẫn duyệt cây VDOM; component vẫn tái thực thi. Kết quả swap row bên dưới là bằng chứng thực nghiệm cho điều này.

Benchmark hiệu năng

Tốc độ

Thao tácReact Hooks 19.2React Compiler 19Solid 1.9.3
Tạo 1k rows24.0 ms24.0 ms21.6 ms
Thay thế 1k rows30.3 ms30.2 ms24.1 ms
Cập nhật một phần (mỗi row thứ 10)14.0 ms13.9 ms10.6 ms
Chọn row4.3 ms6.7 ms3.2 ms
Swap rows88.8 ms89.9 ms12.7 ms
Xóa row11.1 ms11.6 ms10.0 ms
Tạo 10k rows411.1 ms447.6 ms234.4 ms
Thêm 1k rows28.9 ms29.7 ms24.5 ms
Xóa toàn bộ rows16.3 ms16.5 ms10.6 ms

Con số swap rows mới là điều đáng chú ý. Swap hai row nghĩa là hai node thay đổi vị trí — phần còn lại của list không bị ảnh hưởng. Bộ reconciler VDOM của React vẫn duyệt qua toàn bộ list để xác nhận không có gì khác thay đổi: 88.8 ms. Fine-grained subscription của Solid chỉ cập nhật đúng hai node bị ảnh hưởng: 12.7 ms. Đó là sự chênh lệch 7×, và React Compiler còn làm nó tệ hơn một chút (89.9 ms) — nhắc nhở rằng đây chỉ là lớp tối ưu hóa bên trên một thuật toán đệ quy về bản chất, chứ không phải thay thế cho nó.

Với các thao tác create/append/replace, khoảng cách hẹp hơn (khoảng 1.1–1.8×). Với tạo 10k rows, Solid nhanh hơn 1.75× — con số này có ý nghĩa lúc load trang.

Bộ nhớ và kích thước bundle

Chỉ sốReact Hooks 19.2React Compiler 19Solid 1.9.3
Bundle (chưa nén)190.3 KB183 KB11.5 KB
Bundle (đã nén)51.4 KB50 KB4.5 KB
First paint211.6 ms202 ms36.7 ms
Bộ nhớ runtime4.41 MB4.58 MB2.58 MB

Bundle đã nén của Solid là 4.5 KB so với 51 KB của React — chênh lệch 11×. Khoảng cách đó hiện rõ trực tiếp ở first paint: 36.7 ms so với 211.6 ms. Trên mạng di động hoặc thiết bị cấu hình thấp, đây là ranh giới giữa cảm giác tức thì và cảm giác chậm chạp.

Bộ nhớ runtime là 2.58 MB với Solid so với 4.41 MB với React — khoảng cách nhỏ hơn, nhưng vẫn có ý nghĩa trên các tab bị giới hạn bộ nhớ.

Trải nghiệm developer

Mô hình signal của Solid loại bỏ cả một loại bug. Không có dependency array đồng nghĩa không còn cảnh báo lint về dependency bị thiếu và không còn stale closure. Reactivity hoạt động tự động — viết một computation đọc signal, và nó tự theo dõi.

Đánh đổi là JSX trong Solid không phải hàm render — đó là template được xử lý lúc build. Bạn không thể rẽ nhánh điều kiện theo cách mà React developer vẫn quen:

// React: hoạt động bình thường
function Item({ active }) {
  return <div className={active ? 'active' : ''}>{active && <span>on</span>}</div>;
}

// Solid: dùng Show, không dùng &&, để render có điều kiện
function Item(props) {
  return (
    <div class={props.active ? 'active' : ''}>
      <Show when={props.active}>
        <span>on</span>
      </Show>
    </div>
  );
}

Đường cong học tập là có thật. Các primitive của Solid (createSignal, createMemo, createEffect) ít hơn và trực giao hơn so với React (useState, useReducer, useMemo, useCallback, useEffect, useLayoutEffect, useRef), nhưng chúng hoạt động đủ khác để thói quen viết React dễ gây ra bug. Hãy tính từ hai đến bốn tuần trước khi cả team viết Solid đúng idiom.

Về phía React, Compiler loại bỏ gánh nặng khi phải memoization thủ công. Theo tài liệu React Compiler, dự án greenfield sẽ có trải nghiệm mượt mà, trong khi codebase brownfield thường để lộ các vi phạm Rules of React tồn tại lâu nhưng trước đây bị bỏ qua lặng lẽ. Các thư viện phụ thuộc vào mutation trực tiếp hoặc các pattern kiểu MobX có thể cần patch hoặc phải ghim phiên bản.

Hệ sinh thái

React có lượng npm download hàng tuần cao hơn Solid khoảng 53 lần — 134M so với 2.54M trong tuần từ 14–20 tháng 5 năm 2026, theo npm trends. Khoảng cách đó ảnh hưởng trực tiếp đến:

  • Thư viện UI: Material UI, shadcn/ui, Radix, Headless UI, React Aria, Mantine — trưởng thành, accessible, được bảo trì tích cực. Các lựa chọn của Solid là Kobalte (Solid accessibility primitives), Corvu (primitives), và Solid UI (một port của shadcn). Chúng hoạt động được nhưng còn khá mới.
  • Tuyển dụng: lượng tin tuyển dụng lệch rõ rệt — ZipRecruiter hiển thị hơn 1.000 vị trí React JS so với khoảng 22 vị trí SolidJS tính đến tháng 5 năm 2026. Sự chênh lệch này trở nên quan trọng ngay khi team cần mở rộng.
  • Tooling: React DevTools, Storybook, React Testing Library, hàng chục thư viện quản lý state. Solid có solid-devtools và một testing library, nhưng độ rộng hệ sinh thái vẫn còn hạn chế.

Về meta-framework: Next.js 16.2 đã được kiểm chứng trong production và liên tục ra tính năng mới. SolidStart 1.0 (stable từ tháng 5 năm 2024) hoạt động tốt và sẵn sàng cho production, nhưng nền tảng kiến thức cộng đồng — tutorials, câu trả lời Stack Overflow, hỗ trợ plugin bên thứ ba — chỉ là một phần nhỏ so với Next.js. Với kiến trúc server-first, đây không phải một quyết định khó.

Nếu Svelte cũng nằm trong danh sách cân nhắc của bạn, React vs Svelte đề cập các trade-off tương tự về hiệu năng và DX với những con số khác. Để so sánh hai meta-framework dẫn đầu, xem thêm SvelteKit vs Next.js.

Kết luận

Chọn React nếu:

  • Team đang tuyển dụng và kinh nghiệm Solid hiếm trong pool ứng viên của bạn.
  • Bạn cần thư viện component accessible đã trưởng thành ngay từ ngày đầu (Radix, React Aria, MUI).
  • Server-side rendering hoặc meta-framework full-stack là use case chính.
  • Codebase sẽ phát triển vượt quá 5 developer — độ sâu hệ sinh thái quan trọng ở quy mô lớn.

Chọn Solid nếu:

  • Hiệu năng DOM thuần là yếu tố quyết định: data table với nhiều swap, UI update tần số cao, dashboard với nhiều cell độc lập.
  • Kích thước bundle là ràng buộc thực sự — web mobile, môi trường băng thông thấp, hoặc đang chịu áp lực về Core Web Vitals.
  • Team sẵn sàng đầu tư hai đến bốn tuần để làm quen mô hình reactivity và chấp nhận danh mục thư viện nhỏ hơn.
  • Bạn đang bắt đầu một SPA greenfield và không cần độ trưởng thành SSR ngang Next.js.

Lưu ý

React Compiler 1.0 và codebase hiện có. Compiler áp dụng Rules of React vốn trước đây là tùy chọn. Các thư viện cũ phụ thuộc vào mutation trực tiếp hoặc bọc pattern kiểu MobX có thể bị lỗi lặng lẽ hoặc ngay lúc build. Ghim đúng phiên bản 1.0.x; Babel plugin thêm overhead cho quá trình build, điều này có thể cảm nhận rõ trên monorepo có hàng ngàn file.

SolidJS 2.0.0-beta.0 (tháng 3 năm 2023). Một bản beta 2.0 đang được phát triển với các thay đổi breaking — component Index bị loại bỏ, directive use: bị loại bỏ. Không dùng 2.0 cho production ở thời điểm này. Target đúng là 1.9.x, đây là bản stable. Hãy lên kế hoạch migration nếu bạn dùng Solid và muốn các tính năng của 2.0 trong tương lai.

Những gì chúng tôi chưa kiểm tra. Server components, React Server Actions, streaming SSR, và các use case full-stack SolidStart nằm ngoài phạm vi của js-framework-benchmark. Những workload đó có thể cho ra các trade-off khác.

Tham khảo