React useFormStatus Fremdriftsestimering: Forudsigelse af Færdiggørelsestid

Reacts useFormStatus hook, introduceret i React 18, giver værdifuld information om status for en formularafsendelse. Selvom den ikke direkte tilbyder fremdriftsestimering, kan vi udnytte dens egenskaber og andre teknikker til at give brugere meningsfuld feedback under potentielt langvarige formularafsendelser. Dette indlæg udforsker metoder til at estimere fremdrift og forudsige færdiggørelsestid ved brug af useFormStatus, hvilket resulterer i en mere engagerende og brugervenlig oplevelse.

Forståelse af useFormStatus

Før vi dykker ned i fremdriftsestimering, lad os hurtigt opsummere formålet med useFormStatus. Dette hook er designet til at blive brugt inde i et <form>-element, der anvender action-prop'en. Det returnerer et objekt, der indeholder følgende egenskaber:

• pending: En boolean, der angiver, om formularen i øjeblikket bliver sendt.
• data: De data, der blev sendt med formularen (hvis afsendelsen var vellykket).
• method: HTTP-metoden, der blev brugt til formularafsendelsen (f.eks. 'POST', 'GET').
• action: Funktionen, der blev givet til formularens action-prop.
• error: Et fejlobjekt, hvis afsendelsen mislykkedes.

Selvom useFormStatus fortæller os, om formularen sendes, giver den ingen direkte information om fremdriften af afsendelsen, især hvis action-funktionen involverer komplekse eller langvarige operationer.

Udfordringen ved Fremdriftsestimering

Kerneudfordringen ligger i, at udførelsen af action-funktionen er uigennemsigtig for React. Vi ved ikke i sig selv, hvor langt processen er kommet. Dette gælder især for server-side-operationer. Vi kan dog anvende forskellige strategier for at overvinde denne begrænsning.

Strategier for Fremdriftsestimering

Her er flere tilgange, du kan tage, hver med sine egne kompromiser:

1. Server-Sent Events (SSE) eller WebSockets

Den mest robuste løsning er ofte at pushe fremdriftsopdateringer fra serveren til klienten. Dette kan opnås ved hjælp af:

• Server-Sent Events (SSE): En envejs (server-til-klient) protokol, der giver serveren mulighed for at pushe opdateringer til klienten over en enkelt HTTP-forbindelse. SSE er ideel, når klienten kun behøver at *modtage* opdateringer.
• WebSockets: En tovejs kommunikationsprotokol, der giver en vedvarende forbindelse mellem klienten og serveren. WebSockets er velegnede til realtidsopdateringer i begge retninger.

Eksempel (SSE):

Server-side (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
              
            
          

Klient-side (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
              
            
          

Forklaring:

• Serveren sætter de relevante headers for SSE.
• Serveren sender fremdriftsopdateringer som data:-events. Hver event er et JSON-objekt, der indeholder progress og et completed-flag.
• React-komponenten bruger EventSource til at lytte efter disse events.
• Komponenten opdaterer sin state (progress) baseret på de modtagne events.

Fordele: Præcise fremdriftsopdateringer, realtidsfeedback.

Ulemper: Kræver ændringer på server-siden, mere kompleks implementering.

2. Polling med et API-Endepunkt

Hvis du ikke kan bruge SSE eller WebSockets, kan du implementere polling. Klienten sender periodisk anmodninger til serveren for at tjekke status for operationen.

Eksempel:

Server-side (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
              
            
          

Klient-side (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
              
            
          

Forklaring:

• Klienten starter en opgave ved at kalde /start-task og modtager et taskId.
• Klienten poller derefter /task-status/:taskId periodisk for at få fremdriften.

Fordele: Relativt simpelt at implementere, kræver ikke vedvarende forbindelser.

Ulemper: Kan være mindre præcis end SSE/WebSockets, introducerer latenstid på grund af polling-intervallet, belaster serveren på grund af hyppige anmodninger.

3. Optimistiske Opdateringer og Heuristikker

I nogle tilfælde kan du bruge optimistiske opdateringer kombineret med heuristikker for at give et rimeligt skøn. For eksempel, hvis du uploader filer, kan du spore antallet af uploadede bytes på klientsiden og estimere fremdriften baseret på den samlede filstørrelse.

Eksempel (Fil-upload):

            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
              
            
          

Forklaring:

• Komponenten bruger et XMLHttpRequest-objekt til at uploade filen.
• progress-event-listeneren på xhr.upload bruges til at spore upload-fremdriften.
• Egenskaberne loaded og total i eventen bruges til at beregne den færdige procentdel.

Fordele: Kun på klientsiden, kan give øjeblikkelig feedback.

Ulemper: Nøjagtigheden afhænger af heuristikkens pålidelighed, er muligvis ikke egnet til alle typer operationer.

4. Opdeling af Handlingen i Mindre Trin

Hvis action-funktionen udfører flere adskilte trin, kan du opdatere UI'en efter hvert trin for at angive fremdrift. Dette kræver, at action-funktionen ændres til at levere opdateringer.

Eksempel:

            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
              
            
          

Forklaring:

• myAction-funktionen accepterer et setProgress-callback.
• Den opdaterer fremdrifts-state'en på forskellige tidspunkter under dens udførelse.

Fordele: Direkte kontrol over fremdriftsopdateringer.

Ulemper: Kræver ændring af action-funktionen, kan være mere kompleks at implementere, hvis trinnene ikke er let opdelelige.

Forudsigelse af Færdiggørelsestid

Når du har fremdriftsopdateringer, kan du bruge dem til at forudsige den estimerede resterende tid. En simpel tilgang er at spore den tid, det tager at nå et bestemt fremskridtsniveau, og ekstrapolere for at estimere den samlede tid.

Eksempel (Forenklet):

            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
              
            
          

Forklaring:

• Vi gemmer starttidspunktet, når fremdriften opdateres første gang.
• Vi beregner den forløbne tid og bruger den til at estimere den samlede tid.
• Vi beregner den resterende tid ved at trække den forløbne tid fra den estimerede samlede tid.

Vigtige Overvejelser:

• Nøjagtighed: Dette er en *meget* forenklet forudsigelse. Netværksforhold, serverbelastning og andre faktorer kan have betydelig indflydelse på nøjagtigheden. Mere sofistikerede teknikker, som f.eks. gennemsnit over flere intervaller, kan forbedre nøjagtigheden.
• Visuel Feedback: Angiv tydeligt, at tiden er et *estimat*. At vise intervaller (f.eks. "Estimeret resterende tid: 5-10 sekunder") kan være mere realistisk.
• Kanttilfælde: Håndter kanttilfælde, hvor fremdriften er meget langsom i starten. Undgå at dividere med nul eller vise overdrevent store estimater.

Kombination af useFormStatus med Fremdriftsestimering

Selvom useFormStatus i sig selv ikke giver information om fremdrift, kan du bruge dens pending-egenskab til at aktivere eller deaktivere fremdriftsindikatoren. For eksempel:

            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
              
            
          

I dette eksempel vises fremdriftsindikatoren kun, mens formularen er afventende (dvs. mens useFormStatus.pending er true).

Bedste Praksis og Overvejelser

• Prioritér Nøjagtighed: Vælg en teknik til fremdriftsestimering, der passer til den type operation, der udføres. SSE/WebSockets giver generelt de mest præcise resultater, mens heuristikker kan være tilstrækkelige til enklere opgaver.
• Giv Tydelig Visuel Feedback: Brug fremdriftsbjælker, spinnere eller andre visuelle signaler til at indikere, at en operation er i gang. Mærk tydeligt fremdriftsindikatoren og, hvis relevant, den estimerede resterende tid.
• Håndter Fejl Elegant: Hvis der opstår en fejl under operationen, skal du vise en informativ fejlmeddelelse til brugeren. Undgå at lade fremdriftsindikatoren sidde fast på en bestemt procentdel.
• Optimer Ydeevne: Undgå at udføre beregningsmæssigt dyre operationer i UI-tråden, da dette kan påvirke ydeevnen negativt. Brug web workers eller andre teknikker til at aflaste arbejde til baggrundstråde.
• Tilgængelighed: Sørg for, at fremdriftsindikatorer er tilgængelige for brugere med handicap. Brug ARIA-attributter til at give semantisk information om operationens fremdrift. Brug f.eks. aria-valuenow, aria-valuemin og aria-valuemax på en fremdriftsbjælke.
• Lokalisering: Når du viser estimeret resterende tid, skal du være opmærksom på forskellige tidsformater og regionale præferencer. Brug et bibliotek som date-fns eller moment.js til at formatere tiden passende for brugerens lokalitet.
• Internationalisering: Fejlmeddelelser og anden tekst bør internationaliseres for at understøtte flere sprog. Brug et bibliotek som i18next til at administrere oversættelser.

Konklusion

Selvom Reacts useFormStatus hook ikke direkte tilbyder funktioner til fremdriftsestimering, kan du kombinere den med andre teknikker for at give brugerne meningsfuld feedback under formularafsendelser. Ved at bruge SSE/WebSockets, polling, optimistiske opdateringer eller opdeling af handlinger i mindre trin, kan du skabe en mere engagerende og brugervenlig oplevelse. Husk at prioritere nøjagtighed, give tydelig visuel feedback, håndtere fejl elegant og optimere ydeevnen for at sikre en positiv oplevelse for alle brugere, uanset deres placering eller baggrund.

Yderligere Udforskning

• React useFormStatus Dokumentation
• Server-Sent Events (SSE)
• WebSockets
• XMLHttpRequest