useEffect

useEffect để quản lý vòng đời của của một component và nó phục vụ chúng ta sử dụng trong function component thay vì các lifecycle như trước đây trong class component.

useEffect Hook cho phép chúng ta khải báo sử dụng 1 effect với cú pháp như sau:

useEffect(handlerFunction, paramsArray?)

Trong đó:

• handlerFunction: là hàm thực thi một công việc nào đó khi effect được khởi chạy
• paramsArray (optional): là một mảng các tham số để theo dõi, khi giá trị các tham số này thay đổi, effect mới được khởi chạy.

useEffect chỉ chạy khi  Mount?

Ta chỉ cần truyền paramsArray là 1 mảng rỗng, như vậy effect sẽ chỉ được gọi duy nhất 1 lần sau khi component hoàn thành việc render ra màn hình:

useEffect(() => {
  console.log('Component đã được render!')
}, [])

useEffect chỉ chạy khi Mount và UpdateState?

Thay vì mảng rỗng, paramsArray giờ sẽ nhận vào 1 biến chứa giá trị cần theo dõi khi nó được update để thực thi effect:

useEffect(() => {
  console.log('Effect được gọi rùi nè!')
  setFullName({ name: 'Hoa Tran', familyName: 'HTB' })
}, [fullName.name])

useEffect chỉ chạy khi Unmount?

Trên thực tế, handlerFunction sẽ có thể return 1 function khác, và function này sẽ được thực thi khi component đó được unmount:

useEffect(() => {
  console.log('Component đã được render!')

  // return 1 function, sẽ được gọi ngay khi componentWillUnmount
  return () => {
     console.log('Component chuẩn bị unmount!')
  }
}, []) // Nhớ thêm paramsArray để tránh việc effect bị gọi vô số lần nhé!

• useEffect giúp quản lý lifecycle trong functional components dễ dàng.
• useEffect mặc định không có paramsArray sẽ thực thi trong mọi lần re-render của component.
• Cần quản lý tốt điều kiện thực thi của useEffect để tránh việc chạy effect không mong muốn.
• handlerFunction trong useEffect có thể return 1 function khác, được chạy khi component unmount.