Trong React Native, các side effect là những tác vụ không liên quan đến việc render của component. Hãy cùng bài viết dưới đây giúp bạn biết cách quản lý side effect trong React Native nhé!
Các side effect thường bao gồm các tác vụ như:
- Truy vấn dữ liệu từ API
- Chạy các hàm setTimeout hoặc setInterval
- Sử dụng các thư viện bên thứ ba
Trước khi React Hooks được giới thiệu, các side effect được quản lý bằng các phương thức lifecycle của class component. Tuy nhiên, cách tiếp cận này có một số hạn chế, chẳng hạn như:
- Khó khăn trong việc quản lý các side effect lồng nhau
- Khó khăn trong việc dọn dẹp các side effect khi component ngừng hoạt động
React Hooks đã giải quyết các hạn chế này bằng hook useEffect. Hook useEffect cho phép bạn chạy mã khi component được render lần đầu tiên hoặc khi trạng thái hoặc các prop của component thay đổi.
Cách sử dụng hook useEffect
Hook useEffect chấp nhận hai tham số:
- Một hàm: Hàm này sẽ được chạy khi component được render lần đầu tiên hoặc khi trạng thái hoặc các prop của component thay đổi.
- Một mảng: Mảng này chứa danh sách các biến trạng thái hoặc prop mà sẽ kích hoạt hàm useEffect.
Ví dụ:
Trong ví dụ trên, chúng ta sử dụng hook useEffect để truy vấn dữ liệu từ API. Hàm useEffect sẽ được chạy khi component được render lần đầu tiên và mỗi khi trạng thái của count thay đổi.
Dọn dẹp các side effect
Khi component ngừng hoạt động, bạn cần dọn dẹp các side effect mà component đã tạo ra. Bạn có thể làm điều này bằng cách trả về một hàm từ hook useEffect. Hàm này sẽ được chạy khi component ngừng hoạt động.
Ví dụ:
Trong ví dụ trên, chúng ta sử dụng hook useEffect để truy vấn dữ liệu từ API. Hàm useEffect sẽ trả về một hàm để hủy kết nối với API khi component ngừng hoạt động.
Kết luận
Hook useEffect là một công cụ mạnh mẽ giúp bạn quản lý các side effect trong React Native. Bằng cách sử dụng hook useEffect, bạn có thể dễ dàng chạy các tác vụ không liên quan đến việc render của component một cách hiệu quả và an toàn.
Giảng viên: Nguyễn Ngọc Chấn
Bộ mô Công nghệ thông tin
FPT Polytechnic HCM
