Tìm hiểu cơ bản cách sử dụng Hook trong React hooks

Nguyễn Xuân Sơn -

Chúng ta đã có thể sử dụng state trong stateless (functional) component, việc mà từ trước tới nay ta bắt buộc phải khai báo Class. Có thể thấy, các nhà phát triển React họ đang muốn hướng đến 1 tương lai Functional Programming thay vì sử dụng những Class mà chỉ nghe cái tên thôi là ta đã nghĩ ngay đến OOP. Cộng với việc không sử dụng Class kế thừa từ React Component nữa nên giờ đây kích thước bundle sẽ được giảm đáng kể bởi code sử dụng Hooks.

Vì sao nên dùng React Hooks ?

  • Viết component ngắn gọn và dễ hiểu hơn rất nhiều so với dùng class.
  • Đầy đủ tính năng như class component.
  • Hưởng được các lợi ích của functional component như dễ test một hàm (nhận đầu vào và trả ra kết quả).
  • Loại bỏ được từ khoá “this” thường gây nhầm lẫn khi dùng class.
  • Không cần phải viết lại các class component cũ. Các component mới nên viết với hooks.
  • React Hooks chỉ được sử dụng trong functional component.
  • Dễ dàng custom các hooks như ý muốn theo từng nghiệp vụ khác nhau.

Các Hooks thường được sử dụng :

+ useState

+ useEffect

+ useMemo

Tìm hiểu về cách sử dụng useState và useEffect:

useState:

Về cơ bản, useState luôn trả về 1 mảng có 2 phần tử, phần tử thứ nhất như là 1 con trỏ tới state của bạn, và phần tử thứ hai là 1 hàm để cập nhật state. Nhìn vào đoạn mã thứ nhất bên dưới, chúng ta thấy chúng chưa dùng destructuring, và đoạn mã thứ hai, chúng ta thấy chúng dùng destructuring, đây là cách chính thức để sử dùng, rõ ràng và dễ đọc.

Cách sử dụng :

const [open, setOpen] = useState(false);

onClick() {
     setOpen(true)
 }
useEffect:

useEffect là một vòng đời Hook dành cho các functional component, nó cơ bản là sự kết hợp của componentDidMount, componentDidUpdate và componentWillUnmount. useEffect cũng là nơi bạn quản lý các side-effect hiệu quả.

Mặc dù nó là phương thức vòng đời như những cái khác, nhưng nó tốt hơn những thứ còn lại. Nguyên nhân nó tốt hơn là bạn có thể sử dụng useEffect nhiều lần trong cùng 1 component, nó cho phép bạn tách ra và giữ các nhóm logic liên quan với nhau mà vẫn giữ tính dễ đọc code của bạn.

Cách sử dụng UseEffect:

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source], // giá trị được subcrive
);