Series 4 – React Hooks – State

Bài 1 : Hooks, useState và useEffect – Quản lý dữ liệu và side effects trong React

1. React Hooks là gì?

Hooks là những hàm do React cung cấp để Function Component sử dụng các khả năng như quản lý state, đồng bộ với hệ thống bên ngoài và chia sẻ logic giữa các component.

Ba khái niệm cần hiểu đầu tiên là Hooks, useState và useEffect.

2. Hooks

Một số Hook phổ biến:

Quy tắc sử dụng Hooks

1. Gọi Hooks ở cấp cao nhất của Function Component hoặc custom Hook.
2. Không gọi Hooks bên trong vòng lặp, điều kiện hoặc hàm lồng nhau.
3. Không gọi Hooks trực tiếp từ một hàm thông thường nằm ngoài component hay custom Hook.

Ví dụ đúng:

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

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

Việc tuân thủ quy tắc này giúp React giữ đúng thứ tự các Hook giữa những lần render.

3. useState

useState cho phép component lưu dữ liệu thay đổi theo thời gian.

import { useState } from "react";

function Toggle() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button onClick={() => setIsOpen((previous) => !previous)}>
      {isOpen ? "Đang mở" : "Đang đóng"}
    </button>
  );
}

Khi gọi hàm cập nhật state, React lên lịch render lại component với state mới.

State có thể là số, chuỗi, Boolean, mảng hoặc object. Khi cập nhật mảng hay object, nên tạo giá trị mới thay vì sửa trực tiếp dữ liệu hiện tại.

4. useEffect

useEffect được sử dụng để đồng bộ component với hệ thống bên ngoài, chẳng hạn:

• Đăng ký hoặc hủy đăng ký sự kiện.
• Kết nối đến một dịch vụ bên ngoài.
• Đồng bộ với một API hoặc thư viện không thuộc React.
• Quản lý một số side effects theo vòng đời component.

Ví dụ đăng ký sự kiện online:

import { useEffect, useState } from "react";

function NetworkStatus() {
  const [isOnline, setIsOnline] = useState(
    typeof navigator !== "undefined"
      ? navigator.onLine
      : true
  );

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  return <p>{isOnline ? "Đang trực tuyến" : "Mất kết nối"}</p>;
}

Trong ví dụ:

• Effect đăng ký hai sự kiện khi được thiết lập.
• Hàm cleanup gỡ các sự kiện khi Effect cần được dọn dẹp.
• Mảng dependency rỗng thể hiện Effect không phụ thuộc vào giá trị reactive nào từ component. Trong môi trường phát triển với Strict Mode, React có thể chạy thêm một chu kỳ thiết lập và dọn dẹp để giúp phát hiện lỗi.

Dependency array hoạt động như thế nào?

useEffect(() => {
  // Logic đồng bộ
}, [value]);

Effect sẽ được thiết lập lại khi dependency thay đổi.

• Không truyền dependency array: Effect chạy sau mỗi lần component commit.
• Truyền []: Effect không phụ thuộc vào các giá trị reactive từ component.
• Truyền [value]: Effect đồng bộ lại khi value thay đổi.

Không nên dùng useEffect cho mọi phép tính. Nếu chỉ cần tính một giá trị từ props hoặc state, hãy tính trực tiếp trong lúc render khi phép tính đủ đơn giản.

5. So sánh useState và useEffect

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

Xây dựng component hiển thị bộ đếm thời gian:

1. Sử dụng useState để lưu số giây.
2. Sử dụng useEffect để thiết lập bộ đếm bằng setInterval.
3. Tăng số giây mỗi giây.
4. Dọn dẹp interval khi Effect kết thúc.
5. Đảm bảo không tạo ra nhiều interval ngoài ý muốn.

7. Kết luận

Hooks giúp Function Component quản lý state và tương tác với hệ thống bên ngoài. useState phục vụ dữ liệu của giao diện, còn useEffect được dùng khi cần đồng bộ với những hệ thống nằm ngoài quá trình render của React.

Tiếp theo, chúng ta sẽ tìm hiểu useRef, Context API và State Lifting để xử lý việc lưu trữ và chia sẻ dữ liệu giữa nhiều component.

Khoa Phan

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

Bài viết khác

Series 4 – React Fundamentals: List Rendering, Forms, Form Handling

Series 4 – React Fundamentals   Bài 3: List Rendering, Forms và Form Handling – Hiển thị danh sách và xử lý biểu mẫu trong React   1. Mở đầu Trong một ứng dụng thực tế, dữ liệu thường được hiển thị dưới dạng danh sách: danh sách sản phẩm, bài viết, người dùng hoặc công việc […]

Đọc thêm

Series 4 – React Fundamentals:  State, Events và Conditional Rendering

Series 4 – React Fundamentals   Bài 2: State, Events và Conditional Rendering – Cách React xử lý tương tác người dùng 1. Mở đầu Một giao diện website không chỉ hiển thị nội dung cố định. Khi người dùng nhấn nút, nhập dữ liệu, đăng nhập hoặc thêm sản phẩm vào giỏ hàng, giao diện cần […]

Đọc thêm

Series 4 — React Fundamentals : JSX, Components và Props – Ba nền tảng đầu tiên khi học React

Series 4 – React Fundamentals   Bài 1:JSX, Components và Props – Ba nền tảng đầu tiên khi học React 1. Mở đầu Khi xây dựng một website bằng HTML, CSS và JavaScript, chúng ta thường tạo cấu trúc giao diện bằng HTML, sau đó sử dụng JavaScript để xử lý dữ liệu và tương tác. […]

Đọc thêm

Series 3 – JavaScript Fundamentals: Async → API

Series 3 — JavaScript Fundamentals   JavaScript → DOM → Async → API   Bài 2. Asynchronous JavaScript & API – Xử lý bất đồng bộ và giao tiếp với Server 1. Vì sao cần Asynchronous JavaScript? Trong các website hiện đại, nhiều thao tác cần thời gian để hoàn thành, chẳng hạn như gọi API lấy […]

Đọc thêm

Transactions & ACID

1. Transaction là gì? Transaction (giao dịch) là một nhóm thao tác trên database được xem như một đơn vị xử lý logic. Mục tiêu là bảo đảm những thay đổi liên quan được thực hiện theo cách nhất quán: nếu giao dịch thành công thì các thay đổi cần thiết được xác nhận; nếu […]

Đọc thêm

Database Normalization – 1NF, 2NF, 3NF & Denormalization

1. Database Normalization là gì? Database Normalization (chuẩn hóa dữ liệu) là quá trình tổ chức dữ liệu thành các bảng và quan hệ hợp lý nhằm giảm dư thừa không cần thiết, tránh dữ liệu mâu thuẫn và duy trì tính toàn vẹn của database. Khi thiết kế database, nếu lưu tất cả thông […]

Đọc thêm