1. Lời Mở Đầu
useEffect là một trong những hook quan trọng nhất trong React. Nhưng nếu bạn từng cảm thấy rối khi dùng nó, bài viết này sẽ giúp bạn hiểu rõ và áp dụng thành thạo useEffect thông qua giải thích dễ hiểu và ví dụ thực tế.
2. useEffect Hook là gì?
Trong React, useEffect cho phép bạn thực hiện các "side effects" trong function components. Hook này đóng vai trò thay thế cho các phương thức vòng đời trong class component như:
componentDidMount
componentDidUpdate
componentWillUnmount
Mặc định, useEffect sẽ chạy sau mỗi lần render. Tuy nhiên, bạn có thể kiểm soát việc chạy lại thông qua mảng phụ thuộc (dependency array).
3. Khi nào nên dùng useEffect
Một số tình huống phổ biến mà bạn nên sử dụng useEffect bao gồm:
Lấy dữ liệu từ một API.
Thiết lập các trình lắng nghe sự kiện (event listeners) hoặc đăng ký (subscriptions).
Tác động trực tiếp đến DOM (mặc dù React thường xử lý việc thao tác DOM giúp bạn).
Giải phóng tài nguyên khi một component bị unmount.
Syntax:
useEffect(()=>{
// side effect code
},[dependencies]);
- Đối số đầu tiên của useEffect là một hàm chứa mã thực hiện các tác dụng phụ (side effect).
- Đối số thứ hai là một mảng phụ thuộc (dependencies) tùy chọn. Nếu được cung cấp, hiệu ứng (effect) chỉ được chạy lại khi một trong các phụ thuộc thay đổi.
4. Các trường hợp sử dụng phổ biến của useEffect
- Lấy dữ liệu (Fetching Data) Bạn có thể dùng useEffect để gọi API lấy dữ liệu khi component được mount hoặc khi một prop nào đó thay đổi:
useEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); setData(data); }; fetchData();
}, [props.someProp]); 5. Đăng ký sự kiện (Subscribing to Events)
Ví dụ: lắng nghe sự kiện cuộn trang (scroll), thay đổi kích thước (resize), hoặc sự kiện bàn phím:
useEffect(() => { const handleScroll = () => { // Xử lý sự kiện cuộn trang }; window.addEventListener('scroll', handleScroll); // Cleanup khi component unmount hoặc trước lần effect chạy tiếp theo return () => { window.removeEventListener('scroll', handleScroll); };
}, []); 6. Dọn dẹp tài nguyên (Cleaning Up)
useEffect(() => { const subscription = someObservable.subscribe(); return () => { subscription.unsubscribe(); };
}, []);
Về mảng phụ thuộc (Dependency Array)
Không truyền mảng phụ thuộc: Effect sẽ chạy sau mỗi lần render.
useEffect(() => { // Mã sẽ chạy sau mỗi render
});
Truyền mảng rỗng []: Effect chỉ chạy một lần sau render đầu tiên (tương đương componentDidMount).
useEffect(() => { // Mã chỉ chạy một lần khi component mount
}, []);
Truyền mảng có giá trị phụ thuộc: Effect sẽ chạy lại khi các giá trị trong mảng thay đổi.
useEffect(() => { // Mã sẽ chạy lại khi 'name' thay đổi
}, [name]);
7. Kết luận
#useEffect là công cụ mạnh mẽ trong React.js giúp bạn quản lý các side effects trong function components một cách hiệu quả và rõ ràng. Dù bạn cần gọi API, đăng ký sự kiện hay dọn dẹp tài nguyên, useEffect đều giúp bạn xây dựng các ứng dụng có hiệu năng tốt và tuân theo các nguyên tắc của lập trình hàm.
Reference
https://thehumblecoder.medium.com/understanding-the-useeffect-hook-in-react-js-f356712bd44e.