useEffect là gì? Cách sử dụng useEffect trong React Hook (Chi tiết 2026)

useEffect là một React Hook quan trọng giúp bạn xử lý lifecycle trong functional component. Bài viết này sẽ giúp bạn hiểu rõ cách hoạt động và cách sử dụng useEffect hiệu quả.

I. Giới thiệu về useEffect

useEffect cho phép bạn thực hiện các side effects như gọi API, xử lý dữ liệu hoặc thao tác DOM.

II. useEffect là gì?

useEffect thay thế cho các lifecycle method như componentDidMount, componentDidUpdate và componentWillUnmount trong class component.

III. Các cách sử dụng useEffect

1. Chạy một lần khi mount


useEffect(() => {
  fetchData();
}, []);

2. Chạy khi dependency thay đổi


useEffect(() => {
  fetchData();
}, [page]);

3. Cleanup khi unmount


useEffect(() => {
  return () => {
    console.log("cleanup");
  };
}, []);

IV. Tổng kết

useEffect giúp xử lý lifecycle trong React
Phụ thuộc vào dependency array
Có thể cleanup khi component unmount