Trong bài viết này, hãy cùng tìm hiểu cách sử dụng useState và useEffect để quản lý trạng thái và hiệu ứng bên trong các thành phần chức năng (functional components).
React là một thư viện JavaScript phổ biến cho việc xây dựng giao diện người dùng, đặc biệt là các ứng dụng đơn trang (Single Page Applications – SPA). Hai hook thường xuyên được sử dụng trong React là useState và useEffect.
useState
useState là một hook cho phép chúng ta thêm state vào các thành phần chức năng. Khi gọi useState, chúng ta nhận được một cặp giá trị: giá trị hiện tại của state và một hàm để cập nhật nó.
Cú pháp
const [state, setState] = useState(initialState);
- state: Giá trị hiện tại của state.
- setState: Hàm để cập nhật giá trị của state.
- initialState: Giá trị khởi đầu của state.
Ví dụ:
useEffect
useEffect là một hook cho phép chúng ta thực hiện các hiệu ứng phụ trong các thành phần chức năng. Các hiệu ứng phụ này bao gồm các thao tác như gọi API, cập nhật DOM, hoặc thiết lập các subscription.
Cú pháp
useEffect(() => {
// code thực hiện hiệu ứng
return () => {
// code dọn dẹp (tùy chọn)
};
}, [dependencies]);
- () => {}: Hàm chứa mã hiệu ứng.
- []: Danh sách các dependencies. Hiệu ứng sẽ được chạy lại khi một trong các dependencies thay đổi. Nếu để mảng trống, hiệu ứng chỉ chạy một lần sau lần render đầu tiên và khi dọn dẹp.
Ví dụ:
Trong ví dụ này, useEffect gọi API khi thành phần được mount. Mảng dependencies trống nghĩa là hiệu ứng chỉ chạy một lần sau lần render đầu tiên.
Kết hợp useState và useEffect
Chúng ta có thể kết hợp useState và useEffect để xây dựng các thành phần phức tạp hơn. Ví dụ dưới đây minh họa cách cập nhật tiêu đề tài liệu dựa trên state:
Trong ví dụ này, tiêu đề tài liệu sẽ được cập nhật mỗi khi giá trị count thay đổi.
Kết luận
useState và useEffect là hai hook cơ bản nhưng cực kỳ quan trọng trong React. useState giúp quản lý trạng thái bên trong các thành phần chức năng, trong khi useEffect giúp thực hiện các hiệu ứng phụ. Hiểu và sử dụng đúng cách hai hook này sẽ giúp xây dựng các ứng dụng React hiệu quả và dễ dàng bảo trì.
Giảng viên Cao Hoàng Khải
Bộ môn CNTT
FPT Polytechnic TP HCM
