Các hàm dọn dẹp trong UseEffect Hook của React — Đã giải thích

với các ví dụ.

Nếu bạn mới bắt đầu học React hoặc đã có thời gian sử dụng thư viện này, chắc hẳn bạn đã gặp một số lỗi hoặc cảnh báo liên quan đến hàm bất đồng bộ, đặc biệt là sử dụng hook useEffect .

Khi tôi tìm hiểu về chức năng của hook này, tôi không hiểu tại sao lại sử dụng return trong hàm này vì trong hầu hết các trường hợp, không cần thiết phải sử dụng nó và React vẫn hoạt động hoàn hảo nếu không có nó.

Khi tôi trở nên quen thuộc hơn với cách React hoạt động và vòng đời của các thành phần, tôi bắt đầu nhận thấy rằng trong nhiều trường hợp, việc sử dụng return trong hook useEffect là quá quan trọng, đặc biệt là trong các tác dụng phụ.

Các tác dụng phụ là gì?

Tác dụng phụ có thể là tìm nạp dữ liệu từ máy chủ từ xa, đọc hoặc ghi vào bộ nhớ cục bộ, thiết lập trình xử lý sự kiện hoặc thiết lập đăng ký. Những tác dụng phụ này có thể xảy ra khi một nút được bấm, một biểu mẫu được gửi hoặc khi một thành phần được gắn và ngắt kết nối.

Móc useEffect của React cho phép các thành phần chức năng thực hiện mọi việc khi một thành phần được gắn kết hoặc khi một số thuộc tính hoặc trạng thái thay đổi. Móc này cũng cho phép dọn dẹp khi thành phần không được gắn kết.

Tại sao làm sạch tác dụng phụ?

Xử lý các tác dụng phụ trong React là một nhiệm vụ có độ phức tạp trung bình. Tuy nhiên, đôi khi, bạn có thể gặp khó khăn khi giao nhau giữa vòng đời của thành phần (kết xuất ban đầu, lắp ráp, sử dụng, tháo gỡ) và vòng đời tác dụng phụ (đã bắt đầu, đang diễn ra, hoàn thành).

Một khó khăn như vậy là khi một hiệu ứng phụ hoàn thành và cố gắng cập nhật trạng thái của một thành phần đã được tháo rời.

Điều này gây ra cảnh báo React như thế này:

Rò rỉ bộ nhớ trong các ứng dụng React chủ yếu là kết quả của việc không hủy đăng ký được thực hiện khi một thành phần được gắn trước khi thành phần đó không được đếm.

Chúng gây ra nhiều vấn đề, bao gồm:

• Ảnh hưởng đến hiệu suất của dự án bằng cách giảm dung lượng bộ nhớ khả dụng.
• Làm chậm ứng dụng.
• Hệ thống gặp sự cố.

Do đó, cần phải loại bỏ vấn đề rò rỉ bộ nhớ.

Chức năng dọn dẹp useEffect là gì?

Đó là một chức năng của hook useEffect cho phép chúng ta dừng các tác dụng phụ không cần thực thi nữa trước khi thành phần của chúng ta không được đếm.

useEffect được xây dựng theo cách mà chúng ta có thể trả về một hàm bên trong nó và hàm trả về này là nơi quá trình dọn dẹp diễn ra.

Ví dụ: Thành phần A yêu cầu API lấy danh sách sản phẩm, nhưng trong khi thực hiện yêu cầu không đồng bộ đó, Thành phần A bị xóa khỏi DOM (không được đếm). Không cần phải hoàn thành yêu cầu không đồng bộ đó.

Vì vậy, như một phương pháp dọn dẹp để cải thiện ứng dụng của bạn, bạn có thể dọn dẹp (hủy) yêu cầu không đồng bộ để nó không hoàn thành.

Chức năng dọn dẹp của useEffect :

 useEffect(() => { // Your effect return () => { // Cleanup } }, [input])

Dọn dẹp hiệu ứng

Hủy yêu cầu tìm nạp

Có nhiều cách khác nhau để hủy lệnh gọi yêu cầu tìm nạp, chúng ta có thể sử dụng tìm nạp AbortController hoặc Axios AbortController.

Để sử dụng AbortController , chúng ta phải tạo một bộ điều khiển bằng cách sử dụng hàm tạo AbortController() . Sau đó, khi yêu cầu tìm nạp của chúng tôi bắt đầu, chúng tôi chuyển AbortSignal dưới dạng một tùy chọn bên trong đối tượng options của yêu cầu.

Điều này liên kết bộ điều khiển và tín hiệu với yêu cầu tìm nạp và cho phép chúng tôi hủy yêu cầu đó bất kỳ lúc nào bằng cách sử dụng AbortController.abort() :

 useEffect(() => { //create a controller let controller = new AbortController(); (async () => { try { const response = await fetch(API, { // connect the controller with the fetch request signal: controller.signal, }, ); // handle success setList(await response.json()); // remove the controller controller = null; } catch (e) { // Handle the error } })(); //aborts the request when the component umounts return () => controller?.abort(); },[]);

 useEffect(() => { // create a controller const controller = new AbortController(); axios .get(API, { signal: controller.signal }) .then({data}) => { // handle success setList(data); }) .catch((err) => { // Handle the error }); //aborts the request when the component umounts return () => controller?.abort(); }, []);

Dọn dẹp Hết thời gian chờ

Khi sử dụng các hàm hẹn giờ setTimeout(callback, time) , chúng ta có thể xóa chúng khi ngắt kết nối bằng cách sử dụng hàm clearTimeout(timerId) đặc biệt.

 useEffect(() => { let timerId = setTimeout(() => { // do something timerId = null; }, 3000); // cleanup the timmer when component unmout return () => clearTimeout(timerId); }, []);

Làm sạch khoảng thời gian

Giống như Thời gian chờ, setIntervals(callback, time) có chức năng đặc biệt để dọn sạch chúng bằng chức năng clearInterval(intervalId) .

 useEffect(() => { let intervalId = setInterval(() => { // do something like update the state }, 1000); // cleanup the timer when component unmout return () => clearInterval(interval); }, []);

Dọn dẹp Event Listeners

Dọn dẹp Trình nghe diễn ra thông qua window.removeEventListener . Cuộc gọi removeEventListener phải tham chiếu đến chức năng tương tự trong cuộc gọi removeEventListener để loại bỏ trình nghe một cách chính xác.

 useEffect(() => { // function to add to EventListener const handleKeyUp= (event) => { switch (event.key) { case "Escape": setCollapsed(true); break; } } window.addEventListener("keyup", handleKeyUp); // cleanup the listener when component unmout return () => window.removeEventListener("keyup", handleKeyUp); }, []);

Dọn dẹp Web Sockets

Khi bạn tạo một ổ cắm web kết nối, bạn có thể đóng nó trong chức năng dọn dẹp socket.close() .

 useEffect(() => { const ws = new WebSocket(url, protocols) // do what you want with the socket ws.onmessage = (event) => { setValue(JSON.parse(event.data)); }; // cleanup the web socket when component unmout return () => ws.close() }, [])

Sự kết luận

Chúng tôi đã biết rằng một số tác dụng phụ yêu cầu dọn dẹp để tránh rò rỉ bộ nhớ cũng như các hành vi không cần thiết và không mong muốn. Chúng ta phải tìm hiểu thời điểm và cách sử dụng chức năng dọn dẹp của hook useEffect để tránh những sự cố này và tối ưu hóa ứng dụng.

Tôi khuyên bạn nên dọn sạch các hiệu ứng không đồng bộ khi thành phần này không được đếm. Ngoài ra, nếu tác dụng phụ không đồng bộ phụ thuộc vào giá trị prop hoặc trạng thái thì hãy xem xét việc dọn dẹp chúng khi thành phần được cập nhật.

Tôi hy vọng bạn thấy bài viết này hữu ích và giờ đây bạn có thể sử dụng tính năng dọn dẹp một cách chính xác.

Đọc thêm: