Giới thiệu về React Hooks

JS Oct 01, 2020

Trong React, functional component đang dần thay thế toàn bộ class-component vì khả năng dễ phát triển, dễ đọc, dễ test. Nhưng với nhiều functional component thì việc sử dụng state và một số đặc trưng khác của React như lifecycle methods là rất cần thiết. Do đó, ở bản React 16.8, Hooks đã được thêm vào và đã tạo ra sức ảnh hưởng khá lớn trong việc phát triển các ứng dụng React.

Hooks là gì?

Hooks là các function cho phép chúng ta sử dụng state và các đặc trưng khác của React mà không cần phải sử dụng class. Nếu trước đây chúng ta phải viết class-component để có thể sử dụng state hay các lifecycle methods như componentDidMount, componentDidUpdate, ... thì nay, chúng ta có thể sử dụng Hooks trong các functional component.

Việc sử dụng Hooks trong các functional component sẽ giúp cho chúng ta có thể sử dụng lại phần logic trong các component, đơn giản hóa code của một component phức tạp và tránh nhầm lẫn giữa các khái niệm nhập nhằng trong React lifecycle.

Ở bài viết này, mình sẽ giới thiệu một số Hooks cơ bản thường được sử dụng như useState, useEffect. Ngoài ra còn một số Hooks khác như useContext, useReducer, useMemo, useRef, ... hoặc bạn có thể tự custom Hooks để có thể dùng chung cho các component.

useState

Khi bạn muốn sử dụng một state cho component thì có thể dùng useState để thực hiện việc này. useState sẽ trả về cho bạn một giá trị stateful và một function để cập nhật giá trị đó. Còn biến hay function được truyền vào useState sẽ thiết lập giá trị khởi tạo cho state của bạn.

Cùng xem việc sử dụng useState trong ví dụ sau:
react-hook1
Giá trị khởi tạo của state count sẽ được thiết lập bằng 10.
Bạn có thể gọi nhiều useState nếu cần khai báo nhiều state trong môt component. Hơn nữa việc khai báo kiểu array destructuring sẽ cho phép chúng ta tùy biến tên phù hợp cho mỗi state và tên hàm set state tương ứng.

Functional updates

Nếu việc thiết lập state phức tạp, bạn cũng có thể truyền function vào setState để có thể set giá trị mới cho state dựa trên giá trị cũ như sau:
react-hook2
Nếu hàm update trả về giá trị đúng bằng giá trị state hiện tại thì component sẽ không được render lại.

useEffect

useEffect là function được sử dụng thay thế cho các hàm lifecycle trong class-component.
Việc sử dụng các hàm lifecycle trong class-component có thể sẽ gây khó khăn với người mới tiếp cận để có thể hiểu rõ các function này, hơn nữa các function này cũng thường gây ra sự nhập nhằng, dễ nhầm lẫn cho các lập trình viên. Do đó, useEffect đã đơn giản hóa việc sử dụng tập hợp các function này lại và có thể sử dụng chúng trong các functional component.
Trước tiên hãy thử xem cách hoạt động của nó qua ví dụ sau:
react-hook-ue-example

useEffect sẽ thực thi function truyền vào mỗi khi component được render lại, như ví dụ ở trên khi mỗi lần số lượng count thay đổi, thì tiêu đề của tab browser cũng sẽ được thay đổi theo, tương tự như function componentDidUpdate ở class-component.

Vậy còn componentDidMount thì sao, liệu useEfffect có thể sử dụng cho một lần chạy duy nhất sau khi component được render lần đầu tiên? Ngoài việc nhận vào tham số thứ nhất là một function thì useEffect còn nhận vào một tham số thứ hai là một mảng các giá trị mà useEffect sẽ phụ thuộc vào. Actions của effects sẽ chỉ được thực thi khi một giá trị trong mảng này thay đổi.
Do đó, nếu ta truyền vào tham số thứ hai cho useEffect là một mảng rỗng thì nó sẽ chỉ thực thi action effect lần đầu tiên sau khi component được render ra, tương đương với việc sử dụng componentDidMount. Chúng ta có thể tham khảo code của ví dụ phía trên được sửa lại như sau:
react-hook-null-

Tiêu đề của tab browser sẽ được khởi tạo là You clicked 0 times, nhưng cho dù người dùng có click thêm thì action effect cũng sẽ không được thực thi thêm một lần nào nữa, do đó tiêu đề của tab browser sẽ không được thay đổi.

Một ví dụ khác về việc thực thi action effects dựa trên sự thay đổi của một biến:
react-hook-ue-arr

Như ví dụ ở trên, tiêu đề của browser tab sẽ chỉ được thay đổi khi người dùng click vào nút Increase.

Cleaning up an effect

Trong khi phát triển các ứng dụng React, nhiều trường hợp chúng ta phải dọn dẹp lại các function đã thực thi sau khi component bị gỡ khỏi trang, ví dụ như unsubscribe, clearInterval, … Hàm truyền vào useEffect có thể return một function để phục vụ cho mục đích này, tương tự với việc sử dụng function componentWillUnMount.

Ví dụ sau về component hiển thị dữ liệu lấy từ server hàng phút. Và sau khi component này được gỡ khỏi page thì chúng ta phải kết thúc việc truy xuất dữ liệu từ server này bằng function được trả về từ tham số thứ nhất của useEffect.
react-hook-unscribe

Quy tắc khi sử dụng react Hooks

Một số quy tắc được đặt ra khi sử dụng Hooks trong việc phát triển ứng dụng React như sau:

  • Gọi Hooks ở phần đầu của component
  • Không được sử dụng Hooks ở trong các vòng lặp, trong điều kiện, hay trong hàm lồng trong component.
  • Chỉ gọi Hooks ở trong React function components, hoặc custom Hooks

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.