React useFormStatus Framstegsestimering: Förutsägelse av Slutförandetid

Reacts useFormStatus-hook, som introducerades i React 18, ger värdefull information om statusen för en formulärinskickning. Även om den inte direkt erbjuder framstegsestimering kan vi utnyttja dess egenskaper och andra tekniker för att ge användare meningsfull återkoppling under potentiellt långvariga formulärinskickningar. Det här inlägget utforskar metoder för att estimera framsteg och förutsäga slutförandetid när man använder useFormStatus, vilket resulterar i en mer engagerande och användarvänlig upplevelse.

Förståelse för useFormStatus

Innan vi dyker in i framstegsestimering, låt oss snabbt sammanfatta syftet med useFormStatus. Denna hook är utformad för att användas inuti ett <form>-element som använder action-propen. Den returnerar ett objekt som innehåller följande egenskaper:

• pending: En boolean som indikerar om formuläret för närvarande skickas in.
• data: Datan som skickades med formuläret (om inskickningen lyckades).
• method: HTTP-metoden som användes för formulärinskickningen (t.ex. 'POST', 'GET').
• action: Funktionen som skickades till formulärets action-prop.
• error: Ett felobjekt om inskickningen misslyckades.

Även om useFormStatus talar om för oss om formuläret skickas in, ger den ingen direkt information om framstegen för inskickningen, särskilt om action-funktionen involverar komplexa eller långvariga operationer.

Utmaningen med Framstegsestimering

Kärnutmaningen ligger i det faktum att exekveringen av action-funktionen är ogenomskinlig för React. Vi vet inte i sig hur långt processen har kommit. Detta gäller särskilt för operationer på serversidan. Vi kan dock använda olika strategier för att övervinna denna begränsning.

Strategier för Framstegsestimering

Här är flera tillvägagångssätt du kan använda, var och en med sina egna avvägningar:

1. Server-Sent Events (SSE) eller WebSockets

Den mest robusta lösningen är ofta att skicka framstegsuppdateringar från servern till klienten. Detta kan uppnås med:

• Server-Sent Events (SSE): Ett enkelriktat (server-till-klient) protokoll som låter servern skicka uppdateringar till klienten över en enda HTTP-anslutning. SSE är idealiskt när klienten bara behöver *ta emot* uppdateringar.
• WebSockets: Ett dubbelriktat kommunikationsprotokoll som ger en bestående anslutning mellan klient och server. WebSockets är lämpliga för realtidsuppdateringar i båda riktningarna.

Exempel (SSE):

Serversidan (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); // Simulera framstegsuppdatering var 500:e ms
});

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

            

              
                Copy
              
            
          

Klientsidan (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
              
            
          

Förklaring:

• Servern sätter de lämpliga headrarna för SSE.
• Servern skickar framstegsuppdateringar som data:-händelser. Varje händelse är ett JSON-objekt som innehåller progress och en completed-flagga.
• React-komponenten använder EventSource för att lyssna på dessa händelser.
• Komponenten uppdaterar sitt tillstånd (progress) baserat på de mottagna händelserna.

Fördelar: Exakta framstegsuppdateringar, återkoppling i realtid.

Nackdelar: Kräver ändringar på serversidan, mer komplex implementering.

2. Polling med en API-ändpunkt

Om du inte kan använda SSE eller WebSockets kan du implementera polling. Klienten skickar periodvis förfrågningar till servern för att kontrollera statusen på operationen.

Exempel:

Serversidan (Node.js):

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

// Simulera en långvarig uppgift
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); // Generera ett unikt uppgifts-ID

  // Simulera bakgrundsbearbetning
  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
              
            
          

Klientsidan (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); // Polla varje sekund

    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
              
            
          

Förklaring:

• Klienten startar en uppgift genom att anropa /start-task och tar emot ett taskId.
• Klienten pollar sedan /task-status/:taskId periodvis för att få framstegen.

Fördelar: Relativt enkelt att implementera, kräver inga bestående anslutningar.

Nackdelar: Kan vara mindre exakt än SSE/WebSockets, introducerar latens på grund av pollningsintervallet, belastar servern på grund av frekventa förfrågningar.

3. Optimistiska uppdateringar och heuristik

I vissa fall kan du använda optimistiska uppdateringar i kombination med heuristik för att ge en rimlig uppskattning. Om du till exempel laddar upp filer kan du spåra antalet uppladdade bytes på klientsidan och uppskatta framstegen baserat på den totala filstorleken.

Exempel (Filuppladdning):

            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'); // Ersätt med din uppladdnings-ändpunkt
      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
              
            
          

Förklaring:

• Komponenten använder ett XMLHttpRequest-objekt för att ladda upp filen.
• progress-händelselyssnaren på xhr.upload används för att spåra uppladdningens framsteg.
• Egenskaperna loaded och total för händelsen används för att beräkna den procentuella slutförandegraden.

Fördelar: Endast på klientsidan, kan ge omedelbar återkoppling.

Nackdelar: Noggrannheten beror på heuristikens tillförlitlighet, kanske inte är lämplig för alla typer av operationer.

4. Dela upp åtgärden i mindre steg

Om action-funktionen utför flera distinkta steg kan du uppdatera UI:t efter varje steg för att indikera framsteg. Detta kräver att action-funktionen modifieras för att ge uppdateringar.

Exempel:

            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
              
            
          

Förklaring:

• myAction-funktionen accepterar en setProgress-callback.
• Den uppdaterar framstegstillståndet vid olika punkter under sin exekvering.

Fördelar: Direkt kontroll över framstegsuppdateringar.

Nackdelar: Kräver modifiering av action-funktionen, kan vara mer komplex att implementera om stegen inte är lätta att dela upp.

Förutsäga slutförandetid

När du har framstegsuppdateringar kan du använda dem för att förutsäga den uppskattade återstående tiden. Ett enkelt tillvägagångssätt är att spåra tiden det tar att nå en viss framstegsnivå och extrapolera för att uppskatta den totala tiden.

Exempel (förenklat):

            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)); // Säkerställ att det inte är negativt
    }
  }, [progress]);

  // ... (resten av komponenten och framstegsuppdateringar som beskrivits i tidigare avsnitt)

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

export default MyComponent;

            

              
                Copy
              
            
          

Förklaring:

• Vi lagrar starttiden när framstegen först uppdateras.
• Vi beräknar den förflutna tiden och använder den för att uppskatta den totala tiden.
• Vi beräknar den återstående tiden genom att subtrahera den förflutna tiden från den uppskattade totala tiden.

Viktiga överväganden:

• Noggrannhet: Detta är en *mycket* förenklad förutsägelse. Nätverksförhållanden, serverbelastning och andra faktorer kan påverka noggrannheten avsevärt. Mer sofistikerade tekniker, som att beräkna medelvärden över flera intervaller, kan förbättra noggrannheten.
• Visuell återkoppling: Ange tydligt att tiden är en *uppskattning*. Att visa intervall (t.ex. "Uppskattad återstående tid: 5-10 sekunder") kan vara mer realistiskt.
• Kantfall: Hantera kantfall där framstegen är mycket långsamma i början. Undvik att dividera med noll eller visa överdrivet stora uppskattningar.

Kombinera useFormStatus med framstegsestimering

Även om useFormStatus i sig inte ger information om framsteg, kan du använda dess pending-egenskap för att aktivera eller inaktivera framstegsindikatorn. Till exempel:

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

// ... (Logik för framstegsestimering från tidigare exempel)

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

  const handleSubmit = async (formData) => {
    // ... (Din logik för formulärinskickning, inklusive uppdateringar av framsteg)
  };

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

            

              
                Copy
              
            
          

I detta exempel visas framstegsindikatorn endast medan formuläret är väntande (d.v.s. medan useFormStatus.pending är true).

Bästa praxis och överväganden

• Prioritera noggrannhet: Välj en teknik för framstegsestimering som är lämplig för den typ av operation som utförs. SSE/WebSockets ger generellt de mest exakta resultaten, medan heuristik kan vara tillräckligt för enklare uppgifter.
• Ge tydlig visuell återkoppling: Använd förloppsindikatorer, spinnare eller andra visuella ledtrådar för att visa att en operation pågår. Märk tydligt förloppsindikatorn och, om tillämpligt, den uppskattade återstående tiden.
• Hantera fel på ett elegant sätt: Om ett fel inträffar under operationen, visa ett informativt felmeddelande till användaren. Undvik att lämna förloppsindikatorn fast på en viss procentandel.
• Optimera prestanda: Undvik att utföra beräkningsmässigt tunga operationer i UI-tråden, eftersom detta kan påverka prestandan negativt. Använd web workers eller andra tekniker för att avlasta arbete till bakgrundstrådar.
• Tillgänglighet: Säkerställ att förloppsindikatorer är tillgängliga för användare med funktionsnedsättningar. Använd ARIA-attribut för att ge semantisk information om operationens framsteg. Använd till exempel aria-valuenow, aria-valuemin och aria-valuemax på en förloppsindikator.
• Lokalisering: När du visar uppskattad återstående tid, var medveten om olika tidsformat och regionala preferenser. Använd ett bibliotek som date-fns eller moment.js för att formatera tiden korrekt för användarens locale.
• Internationalisering: Felmeddelanden och annan text bör internationaliseras för att stödja flera språk. Använd ett bibliotek som i18next för att hantera översättningar.

Slutsats

Även om Reacts useFormStatus-hook inte direkt tillhandahåller funktioner för framstegsestimering, kan du kombinera den med andra tekniker för att ge användare meningsfull återkoppling under formulärinskickningar. Genom att använda SSE/WebSockets, polling, optimistiska uppdateringar eller genom att dela upp åtgärder i mindre steg kan du skapa en mer engagerande och användarvänlig upplevelse. Kom ihåg att prioritera noggrannhet, ge tydlig visuell återkoppling, hantera fel på ett elegant sätt och optimera prestanda för att säkerställa en positiv upplevelse för alla användare, oavsett deras plats eller bakgrund.

Vidare utforskning

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