Series 4 – React Hooks – State

Bài 1 :Component Lifecycle, Rendering và Re-rendering – React cập nhật giao diện như thế nào?

1. Mở đầu

Khi xây dựng ứng dụng React, một câu hỏi quan trọng là: điều gì xảy ra khi state thay đổi? Vì sao một component được hiển thị lần đầu, sau đó lại chạy lại khi người dùng nhấn nút?

Để trả lời, chúng ta cần hiểu ba khái niệm: Component Lifecycle, Rendering và Re-rendering.

2. Component Lifecycle

Component Lifecycle mô tả các giai đoạn trong quá trình một component được tạo, cập nhật và loại bỏ khỏi giao diện.

Có thể hình dung ba giai đoạn chính:

1. Mount: Component lần đầu được đưa vào giao diện.
2. Update: Component được render lại khi props, state hoặc điều kiện từ cây component thay đổi.
3. Unmount: Component bị loại bỏ khỏi giao diện.

Trong React hiện đại, Function Component thường sử dụng Hooks thay vì các lifecycle method của Class Component.

Ví dụ, useEffect có thể được sử dụng để thiết lập và dọn dẹp một sự đồng bộ với hệ thống bên ngoài:

import { useEffect } from "react";

function ChatConnection({ roomId }) {
  useEffect(() => {
    const connection = connectToRoom(roomId);

    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [roomId]);

  return <p>Phòng chat: {roomId}</p>;
}

connectToRoom ở đây là hàm minh họa cho một hệ thống kết nối được định nghĩa ở nơi khác.

Khi roomId thay đổi, React sẽ dọn dẹp Effect cũ trước khi thiết lập Effect mới. Khi component bị loại bỏ, Effect được dọn dẹp.

Lưu ý: useEffect không phải công cụ để mô phỏng máy móc mọi lifecycle method cũ. Nên xem Effect là cách đồng bộ với hệ thống bên ngoài.

3. Rendering là gì?

Rendering là quá trình React gọi component để tính toán giao diện cần hiển thị dựa trên props, state và context hiện tại.

Ví dụ:

function Greeting({ name }) {
  return <h1>Xin chào, {name}!</h1>;
}

Khi nhận name="Khoa", component trả về cấu trúc giao diện tương ứng.

Trong React, quá trình render và quá trình cập nhật DOM là hai bước khác nhau:

• Render: Tính toán kết quả giao diện.
• Commit: React áp dụng những thay đổi cần thiết vào DOM.

Không phải lần render nào cũng dẫn đến thay đổi DOM. Nếu kết quả không cần cập nhật DOM, React có thể không phải thay đổi phần DOM tương ứng.

4. Re-rendering là gì?

Re-rendering là việc React gọi lại component để tính toán kết quả giao diện mới.

Một số nguyên nhân phổ biến:

• State của component được cập nhật.
• Props mà component nhận được thay đổi.
• Context mà component sử dụng thay đổi.
• Component cha render lại, khiến component con được xét render lại theo cơ chế mặc định.

Ví dụ:

import { useState } from "react";

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

  return (
    <button onClick={() => setCount((value) => value + 1)}>
      Số lần nhấn: {count}
    </button>
  );
}

Mỗi lần state được cập nhật với giá trị mới, React sẽ render lại Counter để tính toán nội dung mới.

Render lại có phải là lỗi?

Không. Re-rendering là một phần bình thường trong cơ chế hoạt động của React.

Chúng ta chỉ cần tối ưu khi việc render gây ra vấn đề hiệu năng thực tế. Việc cố gắng ngăn mọi lần render lại có thể khiến code phức tạp hơn mà không đem lại lợi ích đáng kể.

5. So sánh ba khái niệm

Ba khái niệm có liên quan nhưng không đồng nghĩa với nhau. Lifecycle mô tả vòng đời, còn rendering mô tả một quá trình tính toán giao diện có thể xảy ra nhiều lần trong vòng đời đó.

6. Những lỗi thường gặp

• Cho rằng mỗi lần render đều làm mới toàn bộ DOM.
• Dùng useEffect cho những phép tính có thể thực hiện trực tiếp khi render.
• Tạo side effect ngay trong thân component thay vì dùng event handler hoặc cơ chế đồng bộ phù hợp.
• Quên cleanup đối với event listener, timer hoặc kết nối bên ngoài.
• Thêm dependency không cần thiết hoặc bỏ sót dependency của Effect.

Thân component nên được giữ thuần nhất có thể: cùng props, state và context thì kết quả render phải nhất quán. Những hành động như gửi yêu cầu thanh toán không nên được thực hiện chỉ vì component render.

7. Bài tập thực hành

Tạo một component Timer:

1. Khi component xuất hiện, bắt đầu bộ đếm thời gian.
2. Mỗi giây cập nhật số giây đã trôi qua.
3. Khi component bị loại bỏ, dừng bộ đếm.
4. Thử thay đổi một state khác và quan sát việc render lại.
5. Giải thích vì sao render lại không đồng nghĩa với việc tạo một timer mới trong mọi trường hợp.

8. Kết luận

Component Lifecycle, Rendering và Re-rendering là những kiến thức giúp bạn hiểu cách React quản lý giao diện.

Nắm vững chúng sẽ giúp bạn viết Effect đúng mục đích, phát hiện lỗi do side effect và tránh tối ưu hiệu năng không cần thiết.

Bài cuối của Series 4 sẽ đi sâu hơn vào DOM, Virtual DOM và Reconciliation — cách React xác định những thay đổi cần áp dụng lên giao diện.

Bài 2 :Virtual DOM, Reconciliation và DOM – Cách React cập nhật giao diện hiệu quả

1. Mở đầu

Khi mới học React, nhiều người thường nghe rằng React sử dụng Virtual DOM để cập nhật giao diện hiệu quả hơn. Tuy nhiên, Virtual DOM thực sự là gì? Nó khác DOM như thế nào? Và Reconciliation đóng vai trò gì trong quá trình này?

Để hiểu cơ chế hoạt động của React, chúng ta cần phân biệt ba khái niệm: DOM, Virtual DOM và Reconciliation.

2. DOM là gì?

DOM (Document Object Model) là mô hình biểu diễn tài liệu HTML thành một cấu trúc đối tượng mà JavaScript có thể truy cập và thao tác.

Ví dụ, HTML:

<h1 id="title">Xin chào</h1>

JavaScript có thể truy cập và thay đổi nội dung của phần tử:

const title = document.getElementById("title");

title.textContent = "Xin chào Khoa";

Khi đó, nội dung hiển thị trên trang được thay đổi.

DOM cung cấp những khả năng quan trọng như:

• Truy cập các phần tử HTML.
• Thay đổi nội dung và thuộc tính.
• Thêm hoặc xóa phần tử.
• Đăng ký sự kiện để phản hồi tương tác của người dùng.

Tuy nhiên, nếu tự thao tác DOM trực tiếp ở nhiều nơi trong một ứng dụng lớn, việc đồng bộ giao diện với dữ liệu có thể trở nên khó quản lý.

React giúp giải quyết vấn đề này bằng cách cho phép chúng ta mô tả giao diện dựa trên state, props và context.

3. Virtual DOM là gì?

Virtual DOM là cách gọi phổ biến cho biểu diễn giao diện trong bộ nhớ mà React sử dụng để tính toán và quản lý các cập nhật.

Ví dụ:

function Greeting({ name }) {
  return <h1>Xin chào, {name}!</h1>;
}

Khi name là "Khoa", component mô tả giao diện với nội dung “Xin chào, Khoa!”.

Nếu name thay đổi thành "An", React tính toán kết quả render mới và xác định những cập nhật cần thiết để giao diện phản ánh dữ liệu mới.

Có thể hình dung đơn giản:

1. Component nhận dữ liệu hiện tại.
2. React render để tính toán giao diện.
3. React so sánh kết quả mới với kết quả trước đó.
4. React xác định những thay đổi cần áp dụng.
5. React commit các cập nhật cần thiết vào DOM.

Virtual DOM không phải là một bản sao DOM mà lập trình viên cần tự tạo và quản lý. Đây là cách diễn giải khái niệm để hiểu quá trình React tính toán giao diện.

4. Reconciliation là gì?

Reconciliation là quá trình React xác định cách cập nhật cây giao diện mới so với cây giao diện trước đó.

Khi state hoặc props thay đổi, React có thể render lại component. Sau đó, React xử lý sự khác biệt giữa kết quả render trước và sau để xác định các cập nhật cần thiết.

Ví dụ:

function Counter({ count }) {
  return (
    <div>
      <h1>Bộ đếm</h1>
      <p>Giá trị: {count}</p>
    </div>
  );
}

Giả sử count thay đổi từ 1 thành 2.

Cấu trúc giao diện vẫn giữ nguyên, nhưng nội dung của phần tử p thay đổi. React có thể cập nhật nội dung đó mà không cần tạo lại toàn bộ cấu trúc DOM của component.

Vai trò của key

Khi hiển thị danh sách, React cần nhận diện phần tử tương ứng giữa các lần render.

const users = [
  { id: 1, name: "An" },
  { id: 2, name: "Bình" },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

key giúp React xác định danh tính của các phần tử trong danh sách.

Nếu sử dụng key không ổn định, chẳng hạn chỉ số mảng cho một danh sách có thể thay đổi thứ tự, React có thể giữ lại trạng thái của phần tử không như mong đợi.

5. So sánh DOM, Virtual DOM và Reconciliation

Ba khái niệm có liên hệ chặt chẽ nhưng không thể thay thế cho nhau.

DOM là cấu trúc tài liệu của trình duyệt. Virtual DOM là cách diễn giải phổ biến về biểu diễn giao diện của React. Reconciliation là quá trình xác định cách cập nhật giữa các kết quả render.

6. React có phải lúc nào cũng nhanh hơn JavaScript thuần?

Không nên hiểu rằng React luôn nhanh hơn mọi cách thao tác DOM trực tiếp.

Nếu chỉ thay đổi một nội dung đơn giản, JavaScript thuần có thể rất hiệu quả:

document.querySelector("#title").textContent = "Xin chào";

Điểm mạnh của React nằm ở khả năng tổ chức giao diện thành component, quản lý trạng thái và đồng bộ giao diện với dữ liệu một cách có hệ thống.

Hiệu năng thực tế còn phụ thuộc vào:

• Cấu trúc component.
• Kích thước và cách tổ chức dữ liệu.
• Số lượng component cần render.
• Cách xử lý danh sách.
• Những công việc tính toán trong quá trình render.
• Cách ứng dụng tải và cập nhật dữ liệu.

Vì vậy, nên sử dụng React để tổ chức giao diện và tối ưu dựa trên vấn đề hiệu năng thực tế, thay vì cho rằng Virtual DOM tự động khiến mọi thao tác nhanh hơn.

7. Những lỗi thường gặp

• Cho rằng Virtual DOM chính là DOM thật.
• Nghĩ rằng React tạo lại toàn bộ DOM mỗi khi state thay đổi.
• Cho rằng key chỉ để loại bỏ cảnh báo của React.
• Nghĩ rằng mọi lần render lại đều gây ra cập nhật DOM.
• Lạm dụng useMemo hoặc useCallback khi chưa xác định được vấn đề hiệu năng.

8. Bài tập thực hành

Xây dựng danh sách công việc với các chức năng:

1. Thêm một công việc mới.
2. Xóa một công việc.
3. Đánh dấu công việc đã hoàn thành.
4. Sử dụng ID ổn định làm key.
5. Quan sát cách giao diện thay đổi sau mỗi thao tác.

Sau đó, hãy tự giải thích:

• State nào đã thay đổi?
• Vì sao component cần render lại?
• Những phần nào của giao diện thực sự cần cập nhật?
• Vì sao key ổn định quan trọng khi xóa một công việc?

9. Kết luận

DOM, Virtual DOM và Reconciliation giúp giải thích cách React biến dữ liệu thành giao diện và xác định những cập nhật cần thiết.

• DOM là mô hình tài liệu mà trình duyệt cung cấp.
• Virtual DOM là thuật ngữ phổ biến để mô tả biểu diễn giao diện trong bộ nhớ của React.
• Reconciliation là quá trình React xác định cách cập nhật giao diện giữa các kết quả render.

Khi hiểu được những khái niệm này, bạn sẽ có nền tảng tốt hơn để đọc code React, xử lý vấn đề render và tối ưu các ứng dụng thực tế.

10. Tổng kết Series 4 – React

Series 4 đã hoàn thành với 8 bài blog, bao gồm ba phần:

Phần 1 – React Fundamentals

1. JSX, Components, Props.
2. State, Events, Conditional Rendering.
3. List Rendering, Forms, Form Handling.

Phần 2 – React Hooks & State
4. Hooks, useState, useEffect.
5. useRef, Context API, State Lifting.
6. Component Communication, Props, State Sharing.

Phần 3 – React Rendering
7. Component Lifecycle, Rendering, Re-rendering.
8. Virtual DOM, Reconciliation, DOM.

Sau khi hoàn thành Series 4, bạn đã đi qua những kiến thức cốt lõi của React: xây dựng component, quản lý dữ liệu, xử lý tương tác, chia sẻ state và hiểu cơ chế render giao diện. Đây là nền tảng để tiếp tục học Next.js ở Series 5 khi bạn sẵn sàng quay lại.

Khoa Phan

Xem tất cả bài viết của tác giả

Bài viết khác

Isolation Level

Isolation Level là gì? Các mức độ cô lập trong Database Trong một ứng dụng Backend, nhiều request có thể truy cập và thay đổi dữ liệu trong database cùng một thời điểm. Khi nhiều transaction chạy đồng thời, kết quả của một transaction có thể bị ảnh hưởng bởi những thao tác của transaction […]

Đọc thêm

Boundary Value Analysis(Phân tích giá trị biên)

1.Boundary Value Analysis là gì? Trong quá trình xây dựng và phát triển phần mềm, mặc dù đội ngũ lập trình viên luôn cố gắng viết mã nguồn thật chuẩn xác, nhưng thực tế kiểm thử từ nhiều thập kỷ qua đã đúc kết một quy luật kinh điển: Phần lớn các lỗi logic (logic […]

Đọc thêm

Saga Pattern – Quản lý Distributed Transactions

1. Saga Pattern là gì? Saga Pattern là một mẫu thiết kế dùng để quản lý một nghiệp vụ lớn trải qua nhiều service hoặc database độc lập. các nghiệp vụ được chia thành nhiều local transaction. mỗi transaction cập nhật nghiệp vụ của một service của nó. nếu một bước thất bại, hệ thống […]

Đọc thêm

Two-Phase Locking (2PL) – Cơ chế khóa hai pha trong Database

1. Two-Phase Locking là gì? Two-Phase Locking (2PL – khóa hai pha) là một giao thức kiểm soát đồng thời (concurrency control protocol) trong database. Giao thức này quy định cách một transaction lấy và giải phóng lock nhằm đảm bảo các transaction chạy đồng thời tạo ra kết quả tương đương với một thứ […]

Đọc thêm

Database Isolation Level – Các mức cô lập transaction

1. Isolation Level là gì? Isolation Level (mức cô lập giao dịch) là mức độ kiểm soát việc một transaction nhìn thấy những thay đổi của transaction khác khi nhiều transaction chạy đồng thời trên database. Isolation là chữ I trong ACID. Mục tiêu của nó là hạn chế những kết quả không nhất quán […]

Đọc thêm

locking & dead lock (Transaction)

1. Locking là gì? Locking (cơ chế khóa) là cơ chế database sử dụng để kiểm soát việc nhiều transaction cùng truy cập hoặc thay đổi dữ liệu, nhằm tránh những xung đột có thể làm sai lệch kết quả. Trong một ứng dụng có nhiều user, nhiều request có thể đồng thời thao tác […]

Đọc thêm