Hooks at Glance (tóm tắt lại từ doc)

1. Mục đích

Bài viết này cung cấp cái nhìn tổng quan về Hooks.

2. State Hook

Quay lại ví dụ hôm trước

chương trình tạo ra 1 biến đếm, biến đếm tăng khi ấn vào phím "Increment count"

Trong ví dụ trên useState là 1 Hook. Chúng ta dùng Hook trong function component để thêm state cho function. React sẽ lưu giữ state này cho các lần render sau. useState trả về array - giá trị hiện tại của state và 1 hàm cho phép bạn cập nhật state (state chỉ được phép cập nhật qua hàm này mà không được phép sửa đổi theo dạng state = 2... hay tương tự).

useState nhận vào 1 tham số duy nhất - giá trị khởi tạo của state. Ví dụ trên mình khởi tạo bằng 1. Trong class, state phải là 1 object, tuy nhiên trong Hook, state có thể là bất kể giá trị nào. Giá trị khởi tạo trong useState được sử dụng trong lần render đầu tiên.

Chúng ta có thể khai báo nhiều state trong 1 function component

3. Vậy Hook là gì?

Hooks là những hàm cho phép bạn "móc nối" React state và các đặc điểm của lifecycle với function components. Hooks không sử dụng trong classes. Hooks cho phép bạn viết React app mà không cần dùng đến classes.

4. Effect Hook

Các hành động như lấy dữ liệu từ api, thay đổi DOM ... trong React components được gọi là "side effects" bởi vì các hành động đó có thể tạo hiệu ứng cho các components khác và không thể hoàn thành sớm trong giai đoạn render.

Effect hook, useEffect, cho phép thực hiện side effects từ function component. Có thể coi useEffect là sự tổng hợp lại của componentDidMount, componentDidUpdate, và componentWillUnmount.

5. Một số quy ước cho Hooks

+ Chỉ gọi Hooks ở cấp cao nhất trong component, không gọi Hook trong vòng lặp, if, else, hay gọi trong 1 function. Bởi chúng ta phải đảm bảo rằng Hooks được gọi trong cùng 1 thời điểm lúc render component. Điều này cho phép React lưu giữ chính xác state của Hooks khi có nhiều useState và useEffect được gọi