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:

Effect không cần clean up: gọi API, tương tác DOM 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

// Được chạy sau mỗi lần render
useEffect(() => {
   // Code side-effect ở đây...

   return () => {
      // Code clean up ở đây
      // Sẽ chạy trước khi lần render tiếp theo hoặc unmount
    }
}, [])

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

useEffect(() => {
   // Luôn luôn chạy sau mỗi lần render

   return () => {
      // Code clean up ở đây
      // Sẽ chạy trước khi lần render tiếp theo hoặc unmount
    }
})

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

useEffect(() => {
   // Chạy đúng 1 lần sau lần render đầu tiên

    return () => {
      // Code clean up ở đây
      // Cũng chạy đúng 1 lần unmount
    }
}, [])

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

useEffect(() => {
   // Chạy sau lần render đầu tiên
   // Nhưng lần sau có chạy hay không thì nó sẽ phụ thuộc vào dependency

    return () => {
      // Sẽ chạy trước khi lần render tiếp theo hoặc unmount
    }
}, [dependency])