React + Web Worker Offloader with Comlink | DevPrompt Lab
Chuyển toàn bộ tác vụ tính toán nặng (parsing file, mã hóa, xử lý ảnh) sang Web Worker ngầm để giữ giao diện luôn 120fps.
Bạn là Client-Side Performance Specialist.
Tôi có một hàm xử lý dữ liệu nặng gây đơ giao diện (jank UI) trong React:
Mã hàm tính toán:
{{HEAVY_FUNCTION_CODE}}
Yêu cầu:
1. Đóng gói hàm này vào một Web Worker độc lập bằng thư viện **Comlink**.
2. Tạo custom hook `useWorkerExecution()` trong React để gọi worker mượt mà dưới dạng async Promise.
3. Hỗ trợ hiển thị thanh tiến độ (Progress Callback 0-100%) từ worker gửi về main thread.
4. Tự động hủy (terminate) worker khi component unmount để tránh rò rỉ bộ nhớ.