Ước tính Tiến độ với React useFormStatus: Dự đoán Thời gian Hoàn thành

Hook useFormStatus của React, được giới thiệu trong React 18, cung cấp thông tin quý giá về trạng thái của một quá trình gửi form. Mặc dù nó không trực tiếp cung cấp khả năng ước tính tiến độ, chúng ta có thể tận dụng các thuộc tính của nó và các kỹ thuật khác để cung cấp cho người dùng phản hồi có ý nghĩa trong các quá trình gửi form có thể kéo dài. Bài viết này khám phá các phương pháp để ước tính tiến độ và dự đoán thời gian hoàn thành khi sử dụng useFormStatus, mang lại trải nghiệm hấp dẫn và thân thiện hơn với người dùng.

Tìm hiểu về useFormStatus

Trước khi đi sâu vào việc ước tính tiến độ, chúng ta hãy nhanh chóng tóm tắt mục đích của useFormStatus. Hook này được thiết kế để sử dụng bên trong một phần tử <form> có sử dụng prop action. Nó trả về một đối tượng chứa các thuộc tính sau:

• pending: Một giá trị boolean cho biết form có đang được gửi đi hay không.
• data: Dữ liệu đã được gửi cùng với form (nếu quá trình gửi thành công).
• method: Phương thức HTTP được sử dụng để gửi form (ví dụ: 'POST', 'GET').
• action: Hàm được truyền vào prop action của form.
• error: Một đối tượng lỗi nếu quá trình gửi thất bại.

Mặc dù useFormStatus cho chúng ta biết liệu form có đang được gửi hay không, nó không cung cấp bất kỳ thông tin trực tiếp nào về tiến độ của quá trình gửi, đặc biệt nếu hàm action liên quan đến các hoạt động phức tạp hoặc kéo dài.

Thách thức trong việc Ước tính Tiến độ

Thách thức cốt lõi nằm ở chỗ việc thực thi của hàm action là không tường minh đối với React. Chúng ta không thể biết được quá trình đã đi được bao xa. Điều này đặc biệt đúng đối với các hoạt động phía server. Tuy nhiên, chúng ta có thể sử dụng nhiều chiến lược khác nhau để khắc phục hạn chế này.

Các Chiến lược Ước tính Tiến độ

Dưới đây là một số phương pháp bạn có thể áp dụng, mỗi phương pháp đều có những ưu và nhược điểm riêng:

1. Server-Sent Events (SSE) hoặc WebSockets

Giải pháp mạnh mẽ nhất thường là đẩy các cập nhật tiến độ từ server đến client. Điều này có thể được thực hiện bằng cách sử dụng:

• Server-Sent Events (SSE): Một giao thức một chiều (server-tới-client) cho phép server đẩy các cập nhật đến client qua một kết nối HTTP duy nhất. SSE là lý tưởng khi client chỉ cần *nhận* cập nhật.
• WebSockets: Một giao thức giao tiếp hai chiều cung cấp một kết nối liên tục giữa client và server. WebSockets phù hợp cho các cập nhật thời gian thực theo cả hai hướng.

Ví dụ (SSE):

Phía server (Node.js):

            const express = require('express');
const app = express();

app.get('/progress', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    if (progress > 100) {
      progress = 100;
      clearInterval(interval);
      res.write(`data: {"progress": ${progress}, "completed": true}\n\n`);
      res.end();
    } else {
      res.write(`data: {"progress": ${progress}, "completed": false}\n\n`);
    }
  }, 500); // Simulate progress update every 500ms
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

            

              
                Copy
              
            
          

Phía client (React):

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const eventSource = new EventSource('/progress');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setProgress(data.progress);

      if (data.completed) {
        eventSource.close();
      }
    };

    eventSource.onerror = (error) => {
      console.error('EventSource failed:', error);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <p>Progress: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Giải thích:

• Server đặt các header thích hợp cho SSE.
• Server gửi các cập nhật tiến độ dưới dạng sự kiện data:. Mỗi sự kiện là một đối tượng JSON chứa progress và một cờ completed.
• Component React sử dụng EventSource để lắng nghe các sự kiện này.
• Component cập nhật state (progress) dựa trên các sự kiện nhận được.

Ưu điểm: Cập nhật tiến độ chính xác, phản hồi thời gian thực.

Nhược điểm: Yêu cầu thay đổi phía server, triển khai phức tạp hơn.

2. Polling (Thăm dò) với một API Endpoint

Nếu bạn không thể sử dụng SSE hoặc WebSockets, bạn có thể triển khai polling. Client định kỳ gửi các yêu cầu đến server để kiểm tra trạng thái của hoạt động.

Ví dụ:

Phía server (Node.js):

            const express = require('express');
const app = express();

// Simulate a long-running task
let taskProgress = 0;
let taskId = null;

app.post('/start-task', (req, res) => {
  taskProgress = 0;
  taskId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); // Generate a unique task ID

  // Simulate background processing
  const interval = setInterval(() => {
    taskProgress += 10;
    if (taskProgress >= 100) {
      taskProgress = 100;
      clearInterval(interval);
    }
  }, 500);

  res.json({ taskId });
});

app.get('/task-status/:taskId', (req, res) => {
  if (req.params.taskId === taskId) {
    res.json({ progress: taskProgress });
  } else {
    res.status(404).json({ message: 'Task not found' });
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

            

              
                Copy
              
            
          

Phía client (React):

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [taskId, setTaskId] = useState(null);

  const startTask = async () => {
    const response = await fetch('/start-task', { method: 'POST' });
    const data = await response.json();
    setTaskId(data.taskId);
  };

  useEffect(() => {
    if (!taskId) return;

    const interval = setInterval(async () => {
      const response = await fetch(`/task-status/${taskId}`);
      const data = await response.json();
      setProgress(data.progress);

      if (data.progress === 100) {
        clearInterval(interval);
      }
    }, 1000); // Poll every 1 second

    return () => clearInterval(interval);
  }, [taskId]);

  return (
    <div>
      <button onClick={startTask} disabled={taskId !== null}>Start Task</button>
      {taskId && <p>Progress: {progress}%</p>}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Giải thích:

• Client bắt đầu một tác vụ bằng cách gọi /start-task, nhận về một taskId.
• Sau đó, client thăm dò /task-status/:taskId định kỳ để nhận tiến độ.

Ưu điểm: Tương đối dễ triển khai, không yêu cầu kết nối liên tục.

Nhược điểm: Có thể kém chính xác hơn SSE/WebSockets, gây ra độ trễ do khoảng thời gian thăm dò, tạo tải cho server do các yêu cầu thường xuyên.

3. Cập nhật Lạc quan và Heuristics (Phương pháp phỏng đoán)

Trong một số trường hợp, bạn có thể sử dụng các cập nhật lạc quan kết hợp với các phương pháp phỏng đoán để cung cấp một ước tính hợp lý. Ví dụ, nếu bạn đang tải lên các tệp, bạn có thể theo dõi số byte đã tải lên ở phía client và ước tính tiến độ dựa trên tổng kích thước tệp.

Ví dụ (Tải tệp lên):

            import React, { useState } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const xhr = new XMLHttpRequest();
      xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          const percentage = Math.round((event.loaded * 100) / event.total);
          setProgress(percentage);
        }
      });

      xhr.open('POST', '/upload'); // Replace with your upload endpoint
      xhr.send(formData);

      xhr.onload = () => {
        if (xhr.status === 200) {
          console.log('Upload complete!');
        } else {
          console.error('Upload failed:', xhr.status);
        }
      };

      xhr.onerror = () => {
        console.error('Upload failed');
      };

    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit" disabled={!file}>Upload</button>
      </form>
      <p>Progress: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Giải thích:

• Component sử dụng một đối tượng XMLHttpRequest để tải tệp lên.
• Trình lắng nghe sự kiện progress trên xhr.upload được sử dụng để theo dõi tiến độ tải lên.
• Các thuộc tính loaded và total của sự kiện được sử dụng để tính toán phần trăm hoàn thành.

Ưu điểm: Chỉ cần xử lý phía client, có thể cung cấp phản hồi ngay lập tức.

Nhược điểm: Độ chính xác phụ thuộc vào độ tin cậy của phương pháp phỏng đoán, có thể không phù hợp cho tất cả các loại hoạt động.

4. Chia nhỏ Action thành các Bước Nhỏ hơn

Nếu hàm action thực hiện nhiều bước riêng biệt, bạn có thể cập nhật giao diện người dùng sau mỗi bước để chỉ ra tiến độ. Điều này đòi hỏi phải sửa đổi hàm action để cung cấp các cập nhật.

Ví dụ:

            import React, { useState } from 'react';

async function myAction(setProgress) {
  setProgress(10);
  await someAsyncOperation1();
  setProgress(40);
  await someAsyncOperation2();
  setProgress(70);
  await someAsyncOperation3();
  setProgress(100);
}

function MyComponent() {
  const [progress, setProgress] = useState(0);

  const handleSubmit = async () => {
    await myAction(setProgress);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <button type="submit">Submit</button>
      </form>
      <p>Progress: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Giải thích:

• Hàm myAction chấp nhận một callback setProgress.
• Nó cập nhật trạng thái tiến độ tại các điểm khác nhau trong quá trình thực thi.

Ưu điểm: Kiểm soát trực tiếp các cập nhật tiến độ.

Nhược điểm: Yêu cầu sửa đổi hàm action, có thể phức tạp hơn để triển khai nếu các bước không dễ dàng chia nhỏ.

Dự đoán Thời gian Hoàn thành

Khi bạn đã có các cập nhật tiến độ, bạn có thể sử dụng chúng để dự đoán thời gian ước tính còn lại. Một cách tiếp cận đơn giản là theo dõi thời gian cần thiết để đạt đến một mức tiến độ nhất định và ngoại suy để ước tính tổng thời gian.

Ví dụ (Đơn giản hóa):

            import React, { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState(null);
  const startTimeRef = useRef(null);

  useEffect(() => {
    if (progress > 0 && startTimeRef.current === null) {
      startTimeRef.current = Date.now();
    }

    if (progress > 0) {
      const elapsedTime = Date.now() - startTimeRef.current;
      const estimatedTotalTime = (elapsedTime / progress) * 100;
      const remainingTime = estimatedTotalTime - elapsedTime;
      setEstimatedTimeRemaining(Math.max(0, remainingTime)); // Ensure non-negative
    }
  }, [progress]);

  // ... (rest of the component and progress updates as described in previous sections)

  return (
    <div>
      <p>Progress: {progress}%</p>
      {estimatedTimeRemaining !== null && (
        <p>Estimated Time Remaining: {Math.round(estimatedTimeRemaining / 1000)} seconds</p>
      )}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Giải thích:

• Chúng ta lưu thời gian bắt đầu khi tiến độ được cập nhật lần đầu tiên.
• Chúng ta tính toán thời gian đã trôi qua và sử dụng nó để ước tính tổng thời gian.
• Chúng ta tính thời gian còn lại bằng cách trừ thời gian đã trôi qua khỏi tổng thời gian ước tính.

Những lưu ý quan trọng:

• Độ chính xác: Đây là một dự đoán *rất* đơn giản. Điều kiện mạng, tải của server, và các yếu tố khác có thể ảnh hưởng đáng kể đến độ chính xác. Các kỹ thuật phức tạp hơn, như lấy trung bình qua nhiều khoảng thời gian, có thể cải thiện độ chính xác.
• Phản hồi trực quan: Cho biết rõ ràng rằng thời gian chỉ là *ước tính*. Hiển thị khoảng thời gian (ví dụ: "Thời gian ước tính còn lại: 5-10 giây") có thể thực tế hơn.
• Các trường hợp biên: Xử lý các trường hợp biên khi tiến độ ban đầu rất chậm. Tránh chia cho không hoặc hiển thị các ước tính quá lớn.

Kết hợp useFormStatus với Ước tính Tiến độ

Mặc dù bản thân useFormStatus không cung cấp thông tin tiến độ, bạn có thể sử dụng thuộc tính pending của nó để bật hoặc tắt chỉ báo tiến độ. Ví dụ:

            import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

// ... (Progress estimation logic from previous examples)

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const { pending } = useFormStatus();

  const handleSubmit = async (formData) => {
    // ... (Your form submission logic, including updates to progress)
  };

  return (
    <form action={handleSubmit}>
      <button type="submit" disabled={pending}>Submit</button>
      {pending && <p>Progress: {progress}%</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

Trong ví dụ này, chỉ báo tiến độ chỉ được hiển thị khi form đang chờ xử lý (tức là khi useFormStatus.pending là true).

Các Thực hành Tốt nhất và Lưu ý

• Ưu tiên Độ chính xác: Chọn một kỹ thuật ước tính tiến độ phù hợp với loại hoạt động đang được thực hiện. SSE/WebSockets thường cung cấp kết quả chính xác nhất, trong khi các phương pháp phỏng đoán có thể đủ cho các tác vụ đơn giản hơn.
• Cung cấp Phản hồi Trực quan Rõ ràng: Sử dụng thanh tiến trình, spinner, hoặc các tín hiệu trực quan khác để cho biết một hoạt động đang diễn ra. Ghi nhãn rõ ràng cho chỉ báo tiến độ và, nếu có, thời gian ước tính còn lại.
• Xử lý Lỗi một cách Mềm dẻo: Nếu có lỗi xảy ra trong quá trình hoạt động, hãy hiển thị một thông báo lỗi đầy đủ thông tin cho người dùng. Tránh để chỉ báo tiến độ bị kẹt ở một tỷ lệ phần trăm nhất định.
• Tối ưu hóa Hiệu suất: Tránh thực hiện các hoạt động tốn nhiều tài nguyên tính toán trong luồng giao diện người dùng (UI thread), vì điều này có thể ảnh hưởng tiêu cực đến hiệu suất. Sử dụng web workers hoặc các kỹ thuật khác để chuyển công việc sang các luồng nền.
• Khả năng Tiếp cận (Accessibility): Đảm bảo rằng các chỉ báo tiến độ có thể truy cập được bởi người dùng khuyết tật. Sử dụng các thuộc tính ARIA để cung cấp thông tin ngữ nghĩa về tiến độ của hoạt động. Ví dụ, sử dụng aria-valuenow, aria-valuemin, và aria-valuemax trên một thanh tiến trình.
• Bản địa hóa (Localization): Khi hiển thị thời gian ước tính còn lại, hãy lưu ý đến các định dạng thời gian khác nhau và sở thích của từng vùng. Sử dụng một thư viện như date-fns hoặc moment.js để định dạng thời gian phù hợp với ngôn ngữ của người dùng.
• Quốc tế hóa (Internationalization): Các thông báo lỗi và văn bản khác nên được quốc tế hóa để hỗ trợ nhiều ngôn ngữ. Sử dụng một thư viện như i18next để quản lý các bản dịch.

Kết luận

Mặc dù hook useFormStatus của React không trực tiếp cung cấp khả năng ước tính tiến độ, bạn có thể kết hợp nó với các kỹ thuật khác để cung cấp cho người dùng phản hồi có ý nghĩa trong quá trình gửi form. Bằng cách sử dụng SSE/WebSockets, polling, cập nhật lạc quan, hoặc chia nhỏ các hành động thành các bước nhỏ hơn, bạn có thể tạo ra một trải nghiệm hấp dẫn và thân thiện hơn với người dùng. Hãy nhớ ưu tiên độ chính xác, cung cấp phản hồi trực quan rõ ràng, xử lý lỗi một cách mềm dẻo và tối ưu hóa hiệu suất để đảm bảo trải nghiệm tích cực cho tất cả người dùng, bất kể vị trí hay nền tảng của họ.

Tìm hiểu thêm

• Tài liệu React useFormStatus
• Server-Sent Events (SSE)
• WebSockets
• XMLHttpRequest