React Hooks là gì?

"Hooks là những hàm JavaScript đơn giản cho phép thêm chuyển động vào component vốn tĩnh của chúng ta. Ở đây ‘chuyển động’ nghĩa là state (trạng thái). Nó giống như bạn móc vào một thứ gì đó và điều khiển nó bằng cái móc đó."

Qua nhiều năm, React.js đã phát triển rất nhiều. Nếu nhìn thoáng qua tất cả API của React, sẽ thấy có rất nhiều thứ cần phải hiểu:

JSX
Hooks
Server components & Client components
Suspense
Memoization
cache API
transitions
Context
Higher Order Component / Component Composition
Concurrent Rendering (React Fiber) – cập nhật UI có thể bị ngắt quãng

và nhiều hơn nữa...

Những người đã làm React nhiều năm đều biết việc phát triển trước đây gian nan thế nào, ngay cả trước khi Functional component (component hàm) ra đời. Hãy nhìn hình dưới để thấy sự khác biệt. 😱😱

Từ việc tạo Class component cho đến thêm và cập nhật state bằng cú pháp this trong component, có quá nhiều boilerplate (mã lặp lại) phải viết và bảo trì. Chưa kể việc render UI diễn ra đồng bộ (UI blocking – chặn luồng).

Thôi giới thiệu đủ rồi, chúng ta tập trung vào chủ đề chính nhé.

Trước khi có Functional component, chúng ta thường tạo state trong hàm constructor của Class component. Và để thay đổi nó, bắt buộc phải hiểu rõ từ khóa this.

Để giải quyết những vấn đề trong hệ sinh thái React hiện tại, đội ngũ React từ Meta (trước đây là Facebook) đã giới thiệu Functional component trong phiên bản v16.8, và nó đã thực sự tạo ra cú hích lớn. Nó loại bỏ hầu hết code dư thừa và khiến component đơn giản hơn nhiều để viết và bảo trì.

Sự ra đời của Functional component đánh dấu một bước chuyển mình sang cách viết React mới. Bây giờ chúng ta không cần dùng class, không cần this, mà chỉ cần viết một hàm JavaScript đơn giản và trả về JSX. Rất gọn gàng, phải không!

Nhưng chờ đã, có một vấn đề:

Functional component chỉ nhận props và trả về JSX, không có state, không cập nhật UI, không có tương tác. Chỉ là UI tĩnh!

Nói ngắn gọn:

Functional component là stateless (không có state), không thể tự tạo state bên trong.

Vậy để làm component có state, chúng ta cần gì?

Hooks! Đúng rồi, bạn không đọc nhầm đâu.

Hooks thực chất là những hàm JavaScript đơn giản, có thể trả về giá trị để sử dụng trong Functional component, giúp component trở thành stateful (có trạng thái).

Giờ bạn đã hiểu Hooks là gì. Tiếp theo, hãy tìm hiểu một số quy tắc bắt buộc phải tuân thủ khi dùng Hooks:

Quy tắc sử dụng Hooks

1️⃣ Phải gọi Hooks trong component. Không được gọi bên ngoài component.

2️⃣ Tên hàm phải bắt đầu bằng tiền tố use. (ví dụ: useEffect, useState)

3️⃣ Không được gọi Hooks một cách có điều kiện. Không được gọi trong if-else.

4️⃣ Không được gọi Hook bên trong Hook dựng sẵn của React.

5️⃣ Có thể gọi Hooks dựng sẵn hoặc Hooks custom bên trong Hooks custom của bạn.

6️⃣ Không nên là hàm async. Chỉ dùng hàm bình thường hoặc arrow function.

Ví dụ minh họa

1️⃣ Phải gọi trong component – không được gọi ngoài component

// ❌ Sai – gọi ngoài component
useEffect(() => {
  console.log("effect");
}, []);

function Component() {
  return <div>jsx</div>;
}

2️⃣ Phải bắt đầu bằng use

// ❌ Sai – prefix không đúng
function Component() {
  UseEffect(() => {
    console.log("effect");
  }, []);
  return <div>jsx</div>;
}

3️⃣ Không được gọi có điều kiện

// ❌ Sai – gọi trong if
function Component() {
  let a = 10;
  if (a === 0) {
    useEffect(() => {
      console.log("effect");
    }, []);
  }
  return <div>jsx</div>;
}

4️⃣ Không được gọi Hook trong Hook dựng sẵn của React

// ❌ Sai – gọi hook bên trong useEffect
function Component() {
  useEffect(() => {
    useTimer();  // ❌ gọi custom hook – sai
    useState();  // ❌ gọi hook dựng sẵn – sai
  }, []);
  return <div>jsx</div>;
}

5️⃣ Có thể gọi hook dựng sẵn hoặc custom hook trong hook custom

// ✅ Đúng
function useClick() {
  useEffect(() => {
    const handler = () => {};
    document.addEventListener("click", handler);
    return () => {
      document.removeEventListener("click", handler);
    };
  }, []);

  useTimer(); // ✅ OK
}

6️⃣ Không nên là async function

// ❌ Sai – async function
async function useClick() {
  return { name: "asis" };
}

function Component() {
  const res = useClick();
  return <div>hook</div>;
}

Tổng kết nhanh:

✅ Hooks là hàm JavaScript phải bắt đầu bằng use.

✅ Làm cho Functional component có state.

✅ Dễ học, dễ dùng.

✅ Giảm code boilerplate.

React

Quy tắc sử dụng Hooks

Ví dụ minh họa

Tổng kết nhanh:

Mục lục