What?

Hooks là kỹ thuật mà React đưa ra nhằm tách các component phức tạp thành các phần nhỏ hơn, độc lập về dữ liệu và logic xử lý. Không chỉ giúp giảm số lượng dòng code, điều quan trọng hơn là hooks làm cho code dễ hiểu hơn và tăng tính tái sử dụng.

How?

useState()

useState cho phép định nghĩa ra state và cung cấp phương thức để thay đổi nội dung của state. Nghe thì có vẻ giông giống redux, nhưng đơn giản hơn rất nhiều.

const [value, setValue] = useState();

Câu lệnh trên tạo ra trong state một biến value, và trả về cho chúng ta 2 thành phần, có thể hiểu nôm na là getter và setter của biến value.

Trong ví dụ này, tôi sử dụng useStateđể tạo và liên kết đến biến count trong state. Giá trị của count được update mỗi khi click vào button.

Ở đây có một điểm cần chú ý, đó là setter ghi dữ liệu mới vào state, nhưng không update getter ngay lập tức, mà đến khi render mới update.

Trong code mẫu trên, tôi thử ghi ra giá trị của count ngay sau khi gọi setCount thì có thể thấy là nó chưa được thay đổi. Tức là count ở đây không phải là getter mà chỉ là tham trị của state tại thời điểm đó. Do đó, nếu muốn thực hiện xử lý dựa trên giá trị của count thì cần để ý update giá trị của nó trước.

useEffect

Effect là thay thế của các lifecyle event của component. effect được chạy sau mỗi lần render.

Trở lại ví dụ trên, một cách để đảm bảo sử dụng giá trị đã update của count là thông qua useEffect.

  React.useEffect(() => {
    if (count >= 2) {
      setMsg("Hura from effect");
    }
  }, [count]);

Với khai báo trên, mặc dù effect được gọi mỗi lần render, nhưng chỉ khi nào có sự thay đổi của state count thì đoạn code bên trong mới được thực thi.