Cách dùng useEffect() trong ReactHooks

Chào các bạn, hôm nay chúng ta sẽ đi sâu vào useEffect() trong React Hooks, một công cụ mạnh mẽ cho phép chúng ta xử lý các side effects trong các component. Chúng ta sẽ không chỉ tìm hiểu cú pháp mà còn xem xét các tình huống sử dụng nâng cao và một số mẹo thực hành.

1. Khái Niệm Cơ Bản Về useEffect()

• useEffect cho phép bạn thực hiện các tác vụ ngoài việc render, như gọi API, theo dõi sự kiện, và thao tác với DOM.
• Side effects bao gồm bất kỳ hoạt động nào mà không phải chỉ là render lại component, ví dụ như:
  • Gọi một API để lấy dữ liệu.
  • Thiết lập một listener cho sự kiện.
  • Cập nhật tiêu đề của trang.

2. Cú Pháp useEffect

useEffect

4. Ví Dụ Nâng Cao: Theo Dõi Sự Thay Đổi

Giả sử bạn muốn theo dõi một state và thực hiện một tác vụ mỗi khi state đó thay đổi.

useEffect

6. Các Lưu Ý Quan Trọng

• Tránh Side Effects Trong Render: Đừng thực hiện side effects trong phần render của component, vì điều này có thể dẫn đến các vấn đề về hiệu suất và lỗi không mong muốn.
• Chỉ Sử Dụng Dependency Array Khi Cần Thiết: Nếu bạn bỏ qua dependency array, useEffect sẽ chạy lại sau mỗi lần render. Nếu bạn truyền một mảng rỗng, nó sẽ chỉ chạy một lần khi component mount.
• Lưu Ý Đến Clean-up: Luôn nhớ dọn dẹp các tác vụ để tránh rò rỉ bộ nhớ.

7. Bài Tập Thực Hành

Hãy thử tạo một ứng dụng sử dụng useEffect để tạo một stopwatch. Mỗi giây, nó sẽ tăng một giá trị, và bạn cần sử dụng clean-up function để dừng stopwatch khi component unmount.

Nếu bạn có câu hỏi hoặc cần thêm thông tin, đừng ngần ngại hỏi nhé! Chúc các bạn học tốt!

• React