useEffect trong React

  • admin
  • 31 Tháng Năm, 2022

Hi mọi người bài này mình sẽ nói về hook useEffect() nha

useEffect() là 1 hook trong React hook hỗ trợ cho functional component. Thường được dùng xử lý các vấn đề liên quan đến side-effects. Side effects có thể hiểu nôm na là những thứ mà nó tác động, chạy phía bên ngoài component của mình như

  • Gọi API lấy dữ liệu trên server
  • Tương tác với DOM
  • Subscriptions
  • SetTimeout, setInterVal

Chia làm 2 loại effects:

  1. Effect không cần clean up: gọi API, tương tác DOM
  2. Effect cần clean up: subscriptions, setTimeout, setInterVal

useEffect()

– Gồm 2 phần: side effect và clean up (option)

– Được chạy sau mỗi lần render

– Được thực thi ít nhất sau 1 lần render đầu tiên

– Những lần sau, chỉ được thực thi nếu có có dependencies thay đổi

– Effect cleanup sẽ được chạy trước khi run effect lần tiếp theo hoặc unmount

Cơ bản useEffect cũng là 1 cái hàm thôi nhận vào 2 tham số callback và dependencies: useEffect(callback, dependency)

– Mình ví dụ 1 code mẫu ở đây nha

Dùng với dependency thì mình sẽ ví dụ 3 trường hợp
– Trường hợp 1: Không khai báo dependency

 

– Trường hợp 2: dependency là empty

 

– Trường hợp 3: dependency có dữ liệu tham số đầu vào

 

 

guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x