React useFormStatus Progress Calculator: การประเมินความคืบหน้าแบบเรียลไทม์เพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น

ในการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ การให้ข้อมูลป้อนกลับที่ชัดเจนและทันทีแก่ผู้ใช้ระหว่างการส่งฟอร์มเป็นสิ่งสำคัญสำหรับประสบการณ์ผู้ใช้ที่ดี เทคนิคที่มีประสิทธิภาพอย่างหนึ่งคือการนำเครื่องคำนวณความคืบหน้าแบบเรียลไทม์มาใช้ เพื่อให้ผู้ใช้ได้รับภาพยืนยันว่าข้อมูลของพวกเขากำลังถูกประมวลผล สิ่งนี้ไม่เพียงแต่ช่วยลดความกังวลของผู้ใช้ แต่ยังช่วยเพิ่มการมีส่วนร่วมอีกด้วย Hook `useFormStatus` ของ React เมื่อรวมกับการติดตามความคืบหน้าเชิงกลยุทธ์ จะช่วยให้นักพัฒนาสามารถสร้างตัวบ่งชี้ความคืบหน้าที่ซับซ้อนและให้ข้อมูลได้

ทำความเข้าใจ React useFormStatus

Hook `useFormStatus` ที่เปิดตัวใน React 18 ให้ข้อมูลเกี่ยวกับสถานะการส่งขององค์ประกอบ `

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

function MyForm() {
  const { pending } = useFormStatus();

  async function handleSubmit(formData: FormData) {
    'use server';
    // Simulate a slow server action
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('Form submitted successfully!');
  }

  return (
    
      
      
        {pending ? 'Submitting...' : 'Submit'}
      
    
  );
}

export default MyForm;

ในตัวอย่างที่เรียบง่ายนี้ `useFormStatus` ใช้เพื่อปิดใช้งานปุ่มส่งและแสดงข้อความ "กำลังส่ง..." ในขณะที่ฟอร์มกำลังอยู่ในสถานะรอการประมวลผล ซึ่งจะให้ข้อมูลป้อนกลับพื้นฐานแก่ผู้ใช้

การนำเครื่องคำนวณความคืบหน้าแบบเรียลไทม์มาใช้

ในการสร้างตัวบ่งชี้ความคืบหน้าที่ซับซ้อนยิ่งขึ้น เราจำเป็นต้องติดตามความคืบหน้าของกระบวนการส่งฟอร์ม ซึ่งมักจะเกี่ยวข้องกับการแบ่งการส่งออกเป็นหลายขั้นตอน แม้ว่า `useFormStatus` เองจะไม่ได้ให้การอัปเดตความคืบหน้าแบบละเอียด แต่เราสามารถรวมเข้ากับตรรกะที่กำหนดเองเพื่อให้บรรลุสิ่งนี้ได้

สถานการณ์ตัวอย่าง: การอัปโหลดไฟล์

พิจารณาสถานการณ์ของการอัปโหลดไฟล์ กระบวนการส่งอาจเกี่ยวข้องกับขั้นตอนต่อไปนี้:

1. การตรวจสอบไฟล์
2. การปรับขนาดรูปภาพ (ถ้ามี)
3. การอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์
4. การอัปเดตฐานข้อมูล

เราสามารถประมาณความคืบหน้าโดยอิงจากการทำแต่ละขั้นตอนเหล่านี้เสร็จสมบูรณ์

การนำโค้ดไปใช้พร้อมกับการติดตามความคืบหน้า

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

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

  async function handleSubmit(formData: FormData) {
    'use server';
    // Simulate validation (20%)
    await simulateProgress(20, setProgress);
    console.log('File validation completed');

    // Simulate resizing (30%)
    await simulateProgress(30, setProgress);
    console.log('File resizing completed');

    // Simulate upload (40%)
    await simulateProgress(40, setProgress);
    console.log('File upload completed');

    // Simulate database update (10%)
    await simulateProgress(10, setProgress);
    console.log('Database updated');

    console.log('File uploaded successfully!');
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'Uploading...' : 'Upload'}
      
      {pending && (
        

          Progress: {progress}%
          
        
      )}
    
  );
}

export default FileUploadForm;

คำอธิบาย:

• เราใช้ hook `useState` เพื่อจัดการสถานะ `progress` ซึ่งเริ่มต้นที่ 0
• ฟังก์ชัน `handleSubmit` จะจำลองขั้นตอนต่างๆ ของกระบวนการอัปโหลดไฟล์ โดยแต่ละขั้นตอนจะอัปเดตสถานะ `progress` โดยใช้ฟังก์ชัน `simulateProgress`
• ฟังก์ชัน `simulateProgress` ใช้ `setTimeout` เพื่อจำลองการทำงานแบบอะซิงโครนัสและอัปเดตเปอร์เซ็นต์ความคืบหน้าแบบเพิ่มขึ้น ซึ่งจะสร้างการแสดงภาพความคืบหน้าให้ผู้ใช้เห็น
• ในขณะที่ฟอร์มอยู่ในสถานะ `pending` เราจะแสดงแถบความคืบหน้าโดยใช้องค์ประกอบ HTML5 `` ซึ่งสะท้อนถึงค่า `progress` ปัจจุบัน

การปรับแต่งตัวบ่งชี้ความคืบหน้า

การแสดงผลด้วยภาพของตัวบ่งชี้ความคืบหน้าสามารถปรับแต่งได้หลายวิธี:

• การจัดรูปแบบแถบความคืบหน้า: ใช้ CSS เพื่อจัดรูปแบบองค์ประกอบ `` หรือสร้างแถบความคืบหน้าแบบกำหนดเองโดยใช้องค์ประกอบ `
  ` และแอนิเมชัน CSS พิจารณาสีของแบรนด์และสไตล์เพื่อให้เข้ากับการออกแบบแอปพลิเคชันของคุณ
• การอัปเดตข้อความ: ให้การอัปเดตที่ละเอียดมากขึ้นโดยการแสดงข้อความเช่น "กำลังตรวจสอบไฟล์...", "กำลังปรับขนาดรูปภาพ..." เป็นต้น ควบคู่ไปกับแถบความคืบหน้า
• ข้อมูลป้อนกลับด้วยภาพ: ใช้แอนิเมชันหรือไอคอนเพื่อเพิ่มประสิทธิภาพการแสดงผลด้วยภาพ วงล้อโหลด หรือแอนิเมชันเครื่องหมายถูกเมื่อเสร็จสิ้นสามารถปรับปรุงประสบการณ์ผู้ใช้ได้

การจัดการข้อผิดพลาดและกรณีพิเศษ

สิ่งสำคัญคือต้องจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างกระบวนการส่งฟอร์ม Hook `useFormStatus` มีคุณสมบัติ `error` ที่สามารถใช้เพื่อแสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้ได้

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

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

  async function handleSubmit(formData: FormData) {
    'use server';
    try {
      // Simulate validation (20%)
      await simulateProgress(20, setProgress);
      console.log('File validation completed');

      // Simulate an error during upload (after 50%)
      if (progress >= 50) {
        throw new Error('Failed to upload file.');
      }

      // Simulate resizing (30%)
      await simulateProgress(30, setProgress);
      console.log('File resizing completed');

      // Simulate upload (40%)
      await simulateProgress(40, setProgress);
      console.log('File upload completed');

      // Simulate database update (10%)
      await simulateProgress(10, setProgress);
      console.log('Database updated');

      console.log('File uploaded successfully!');
    } catch (err: any) {
      console.error('Error during upload:', err);
      //Handle the error appropriately.
      throw err;
    }
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'Uploading...' : 'Upload'}
      
      {pending && (
        

          Progress: {progress}%
          
        
      )}
      {error && 
Error: {error.message}
}
    
  );
}

export default ErrorHandlingForm;

ข้อควรพิจารณาที่สำคัญ:

• Error Boundaries: ห่อหุ้มฟอร์มของคุณไว้ใน Error Boundary เพื่อจัดการกับข้อผิดพลาดที่ไม่คาดคิดอย่างสง่างาม
• ข้อความที่เป็นมิตรต่อผู้ใช้: แสดงข้อความแสดงข้อผิดพลาดที่ชัดเจนและให้ข้อมูลแก่ผู้ใช้ โดยแนะนำวิธีแก้ไขปัญหา หลีกเลี่ยงศัพท์เฉพาะทางเทคนิคและเน้นคำแนะนำที่สามารถนำไปปฏิบัติได้
• การย้อนกลับ: หากเกิดข้อผิดพลาด ให้พิจารณาใช้กลไกการย้อนกลับเพื่อยกเลิกการเปลี่ยนแปลงใดๆ ที่เกิดขึ้นระหว่างกระบวนการส่ง

ข้อควรพิจารณาด้านการเข้าถึง

ตรวจสอบให้แน่ใจว่าตัวบ่งชี้ความคืบหน้าของคุณสามารถเข้าถึงได้สำหรับผู้ใช้ทุกคน รวมถึงผู้พิการด้วย:

• แอตทริบิวต์ ARIA: ใช้แอตทริบิวต์ ARIA เช่น `aria-valuenow`, `aria-valuemin` และ `aria-valuemax` เพื่อให้ข้อมูลเชิงความหมายเกี่ยวกับแถบความคืบหน้าแก่โปรแกรมอ่านหน้าจอ
• ความคมชัดที่เพียงพอ: ตรวจสอบให้แน่ใจว่าแถบความคืบหน้ามีความคมชัดของสีที่เพียงพอสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น
• การนำทางด้วยแป้นพิมพ์: ตรวจสอบให้แน่ใจว่าฟอร์มและองค์ประกอบต่างๆ สามารถนำทางได้โดยใช้แป้นพิมพ์
• การจัดการโฟกัส: จัดการโฟกัสอย่างเหมาะสม โดยเฉพาะอย่างยิ่งเมื่อแสดงข้อความแสดงข้อผิดพลาดหรือเสร็จสิ้นกระบวนการส่ง

ตัวอย่างและกรณีการใช้งานในโลกจริง

การใช้เครื่องคำนวณความคืบหน้าแบบเรียลไทม์เป็นประโยชน์ในสถานการณ์ต่างๆ:

• การอัปโหลดไฟล์ขนาดใหญ่: ให้ข้อมูลป้อนกลับแก่ผู้ใช้เกี่ยวกับความคืบหน้าของการอัปโหลดไฟล์ขนาดใหญ่ เช่น วิดีโอหรือรูปภาพความละเอียดสูง
• การประมวลผลข้อมูลที่ซับซ้อน: แจ้งผู้ใช้เกี่ยวกับความคืบหน้าของการดำเนินการประมวลผลข้อมูลที่ซับซ้อน เช่น การสร้างรายงานหรือการวิเคราะห์ชุดข้อมูลขนาดใหญ่
• ฟอร์มหลายขั้นตอน: นำทางผู้ใช้ผ่านฟอร์มหลายขั้นตอน แสดงความคืบหน้าที่ทำได้ในแต่ละขั้นตอน
• การชำระเงินในอีคอมเมิร์ซ: ให้ข้อมูลป้อนกลับระหว่างกระบวนการชำระเงิน ทำให้ผู้ใช้มั่นใจว่าคำสั่งซื้อของพวกเขากำลังถูกประมวลผล
• การติดตั้งซอฟต์แวร์: แสดงความคืบหน้าของการติดตั้งหรืออัปเดตซอฟต์แวร์

ตัวอย่างเช่น บริการจัดเก็บข้อมูลบนคลาวด์อาจใช้แถบความคืบหน้าเพื่อระบุสถานะการอัปโหลดไฟล์ ในขณะที่โปรแกรมแก้ไขรูปภาพออนไลน์อาจใช้เพื่อแสดงความคืบหน้าของการปรับใช้ฟิลเตอร์หรือเอฟเฟกต์ต่างๆ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการนำเครื่องคำนวณความคืบหน้ามาใช้

• ประเมินความคืบหน้าอย่างแม่นยำ: มุ่งมั่นที่จะประเมินความคืบหน้าให้แม่นยำที่สุดเท่าที่จะเป็นไปได้ โดยให้ข้อมูลป้อนกลับที่สมจริงแก่ผู้ใช้ การประเมินความคืบหน้าสูงเกินไปอาจนำไปสู่ความหงุดหงิดหากกระบวนการใช้เวลานานกว่าที่คาดไว้
• ให้การอัปเดตที่ละเอียด: ให้การอัปเดตตัวบ่งชี้ความคืบหน้าบ่อยครั้งและละเอียด ทำให้ผู้ใช้รู้สึกถึงความคืบหน้าอย่างต่อเนื่อง
• หลีกเลี่ยงการกระโดดของความคืบหน้า: หลีกเลี่ยงการกระโดดของความคืบหน้าอย่างกะทันหัน เนื่องจากอาจทำให้ผู้ใช้ตกใจและสับสน การเปลี่ยนผ่านที่ราบรื่นเป็นที่ต้องการมากกว่า
• เพิ่มประสิทธิภาพ: เพิ่มประสิทธิภาพของตรรกะการคำนวณความคืบหน้าเพื่อหลีกเลี่ยงผลกระทบต่อประสิทธิภาพโดยรวมของแอปพลิเคชัน
• ทดสอบอย่างละเอียด: ทดสอบตัวบ่งชี้ความคืบหน้าอย่างละเอียดภายใต้เงื่อนไขต่างๆ รวมถึงความเร็วเครือข่ายและขนาดไฟล์ที่แตกต่างกัน เพื่อให้แน่ใจว่าให้ข้อมูลป้อนกลับที่ถูกต้องและเชื่อถือได้

ทางเลือกอื่นสำหรับ useFormStatus ในการติดตามความคืบหน้า

แม้ว่า `useFormStatus` จะยอดเยี่ยมสำหรับการติดตามการส่งฟอร์มขั้นพื้นฐาน แต่ก็มีแนวทางอื่นที่สามารถใช้สำหรับการควบคุมความคืบหน้าแบบละเอียดมากขึ้น:

• Custom Hooks with Promises: สร้าง React hooks แบบกำหนดเองที่ห่อหุ้มการทำงานแบบอะซิงโครนัส (เช่น การอัปโหลดไฟล์) และใช้ Promises เพื่อติดตามความคืบหน้า
• Web Workers: ถ่ายโอนงานที่ต้องใช้การคำนวณมาก (เช่น การปรับขนาดรูปภาพ) ไปยัง Web Workers เพื่อป้องกันการบล็อกเธรดหลักและให้การอัปเดตความคืบหน้าที่ราบรื่นยิ่งขึ้น
• Server-Sent Events (SSE): ใช้ SSE เพื่อรับการอัปเดตแบบเรียลไทม์จากเซิร์ฟเวอร์เกี่ยวกับความคืบหน้าของงานเบื้องหลัง
• WebSockets: ใช้ WebSockets สำหรับการสื่อสารแบบสองทิศทางกับเซิร์ฟเวอร์ ทำให้สามารถติดตามความคืบหน้าและกลไกการให้ข้อมูลป้อนกลับที่ซับซ้อนยิ่งขึ้น

สรุป

การนำเครื่องคำนวณความคืบหน้าแบบเรียลไทม์มาใช้โดยใช้ hook `useFormStatus` ของ React เป็นเทคนิคที่มีคุณค่าสำหรับการปรับปรุงประสบการณ์ผู้ใช้ระหว่างการส่งฟอร์ม ด้วยการให้ข้อมูลป้อนกลับที่ชัดเจนและทันที คุณสามารถลดความกังวลของผู้ใช้ เพิ่มการมีส่วนร่วม และสร้างความไว้วางใจได้ โปรดจำไว้ว่าควรพิจารณาการเข้าถึง การจัดการข้อผิดพลาด และการเพิ่มประสิทธิภาพเมื่อนำตัวบ่งชี้ความคืบหน้ามาใช้ แม้ว่า `useFormStatus` จะมีแนวทางที่คล่องตัว แต่การสำรวจวิธีการติดตามความคืบหน้าทางเลือกตามความซับซ้อนของแอปพลิเคชันของคุณอาจให้ผลลัพธ์ที่ดีกว่า ด้วยการพิจารณาความต้องการของผู้ใช้อย่างรอบคอบและข้อกำหนดเฉพาะของแอปพลิเคชันของคุณ คุณสามารถสร้างตัวบ่งชี้ความคืบหน้าที่มีทั้งข้อมูลและน่าดึงดูดใจ