💪Giải thích ý nghĩa của từng Dependency trong useEffect

Ý nghĩa của từng Dependency trong useEffect

Dependency trong useEffect là một mảng các giá trị xác định khi nào hook useEffect sẽ được thực thi.

Có 3 loại dependency chính:

1. Dependency rỗng ([]):

• Khi dependency là rỗng, hook useEffect chỉ được thực thi một lần sau khi component được mount lần đầu tiên.

• Sau đó, hook useEffect không được thực thi khi state hoặc props của component thay đổi.

Ví dụ:

JavaScript

useEffect(() => {
  // Chạy một lần sau khi component được mount
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setCount(data.count));
}, []);

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

2. Dependency là state:

• Khi dependency là một state, hook useEffect sẽ được thực thi mỗi khi state đó thay đổi.

• Ví dụ:

const [count, setCount] = useState(0);

useEffect(() => {
  // Cập nhật UI mỗi khi state `count` thay đổi
  console.log('Count:', count);
}, [count]);

3. Dependency là props hoặc giá trị khác:

• Khi dependency là props hoặc giá trị khác, hook useEffect sẽ được thực thi mỗi khi dependency đó thay đổi.

• Ví dụ:

const { userId } = useContext(UserContext);

useEffect(() => {
  // Kết nối với API mỗi khi `userId` thay đổi
  fetch(`https://api.example.com/user/${userId}`)
    .then(response => response.json())
    .then(userData => setUser(userData));
}, [userId]);

Lưu ý:

• Bạn có thể kết hợp nhiều dependency trong một mảng.

• Thứ tự các dependency trong mảng không quan trọng.

• Nếu bạn không muốn hook useEffect phụ thuộc vào bất kỳ giá trị nào, hãy sử dụng dependency rỗng ([]).

Sử dụng dependency hiệu quả:

• Việc sử dụng dependency hiệu quả giúp cải thiện hiệu suất render của component.

• Nên tránh sử dụng dependency quá nhiều, vì điều này có thể khiến hook useEffect được thực thi quá thường xuyên, dẫn đến giảm hiệu suất.

• Chỉ nên sử dụng dependency khi cần thiết.

Kết luận:

Dependency trong useEffect là một công cụ mạnh mẽ để kiểm soát khi nào hook useEffect được thực thi. Việc sử dụng dependency hiệu quả giúp cải thiện hiệu suất render và code dễ bảo trì hơn.