Tại sao react không load lại trang khi chuyển page

React không load lại trang vì nó sử dụng Virtual DOM và cơ chế Client-Side Rendering (CSR) để cập nhật giao diện một cách hiệu quả mà không cần tải lại toàn bộ trang. Dưới đây là những lý do chính:

1. React sử dụng Virtual DOM để cập nhật UI

Khi có sự thay đổi trong state hoặc props, React không cập nhật trực tiếp DOM thật (Real DOM) mà thay vào đó, nó cập nhật một bản sao của DOM được gọi là Virtual DOM.

• React so sánh Virtual DOM mới với Virtual DOM cũ (quá trình này gọi là diffing).

• Chỉ những phần thay đổi mới được cập nhật vào Real DOM (Reconciliation).

• Điều này giúp giảm thiểu thao tác trên DOM thật, tăng hiệu suất và tránh việc tải lại trang.

2. Single Page Application (SPA)

React hoạt động theo mô hình Single Page Application (SPA), nghĩa là:

• Khi người dùng chuyển trang, React chỉ thay đổi component cần thiết thay vì tải lại toàn bộ trang.

• URL có thể thay đổi (dùng react-router), nhưng React chỉ cập nhật nội dung thay vì tải lại trang từ server.

Ví dụ:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

Ở đây, khi chuyển từ Home sang About, React chỉ render lại component About mà không tải lại trang.

3. Không có yêu cầu từ server để load lại trang

Trong ứng dụng truyền thống (Multi Page Application - MPA), khi người dùng nhấn vào một liên kết, trình duyệt sẽ gửi request lên server để tải lại toàn bộ trang mới.
Nhưng trong React:

• Khi người dùng thực hiện hành động, React chỉ cập nhật những phần cần thay đổi.

• Không có request mới từ server để tải lại trang trừ khi có thao tác refresh bằng window.location.reload().

4. React quản lý state nội bộ

React lưu trữ state trong bộ nhớ của trình duyệt (RAM) nên khi cập nhật state bằng setState hoặc useState, nó chỉ render lại component chứ không tải lại toàn bộ trang.
Ví dụ:

function Counter() {
  const [count, setCount] = React.useState(0);

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

• Khi nhấn nút, state (count) thay đổi.

• React chỉ cập nhật lại phần tử chứa count thay vì reload toàn bộ trang.

5. React Router hỗ trợ navigation không cần reload

Trong ứng dụng truyền thống, khi thay đổi đường dẫn URL, trình duyệt sẽ tải lại trang.
Nhưng với React Router, nó chỉ thay đổi nội dung mà không tải lại toàn bộ trang:

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Ở đây, khi nhấn vào About, chỉ nội dung của trang About thay đổi mà không có refresh.

💡 Kết luận

React không load lại trang vì:
✅ Sử dụng Virtual DOM để tối ưu cập nhật UI.
✅ Là Single Page Application (SPA) chỉ thay đổi phần cần thiết.
✅ Không cần request server khi cập nhật giao diện.
✅ React Router thay đổi URL mà không reload trang.
✅ State Management trong React giúp cập nhật UI mà không cần tải lại dữ liệu từ đầu.

Vì thế, React giúp tăng trải nghiệm người dùng mượt mà hơn so với cách tải lại trang truyền thống! 🚀