React useFormStatus Fremdriftsestimering: Forutsigelse av fullføringstid

Reacts useFormStatus-hook, introdusert i React 18, gir verdifull informasjon om statusen til en skjemainnsending. Selv om den ikke direkte tilbyr fremdriftsestimering, kan vi utnytte dens egenskaper og andre teknikker for å gi brukere meningsfull tilbakemelding under potensielt langvarige skjemainnsendinger. Dette innlegget utforsker metoder for å estimere fremdrift og forutsi fullføringstid når du bruker useFormStatus, noe som resulterer i en mer engasjerende og brukervennlig opplevelse.

Forståelse av useFormStatus

Før vi dykker inn i fremdriftsestimering, la oss raskt oppsummere formålet med useFormStatus. Denne hooken er designet for å brukes innenfor et <form>-element som benytter action-propen. Den returnerer et objekt som inneholder følgende egenskaper:

• pending: En boolsk verdi som indikerer om skjemaet for øyeblikket sendes inn.
• data: Dataene som ble sendt med skjemaet (hvis innsendingen var vellykket).
• method: HTTP-metoden som ble brukt for skjemainnsendingen (f.eks. 'POST', 'GET').
• action: Funksjonen som ble sendt til skjemaets action-prop.
• error: Et feilobjekt hvis innsendingen mislyktes.

Selv om useFormStatus forteller oss om skjemaet sendes inn, gir den ingen direkte informasjon om fremdriften i innsendingen, spesielt hvis action-funksjonen involverer komplekse eller langvarige operasjoner.

Utfordringen med fremdriftsestimering

Kjerneutfordringen ligger i at utførelsen av action-funksjonen er ugjennomsiktig for React. Vi vet ikke i utgangspunktet hvor langt i prosessen den har kommet. Dette gjelder spesielt for operasjoner på serversiden. Vi kan imidlertid benytte ulike strategier for å overvinne denne begrensningen.

Strategier for fremdriftsestimering

Her er flere tilnærminger du kan ta, hver med sine egne fordeler og ulemper:

1. Server-Sent Events (SSE) eller WebSockets

Den mest robuste løsningen er ofte å sende fremdriftsoppdateringer fra serveren til klienten. Dette kan oppnås ved hjelp av:

• Server-Sent Events (SSE): En enveis (server-til-klient) protokoll som lar serveren sende oppdateringer til klienten over en enkelt HTTP-forbindelse. SSE er ideelt når klienten bare trenger å *motta* oppdateringer.
• WebSockets: En toveis kommunikasjonsprotokoll som gir en vedvarende forbindelse mellom klienten og serveren. WebSockets er egnet for sanntidsoppdateringer i begge retninger.

Eksempel (SSE):

Serverside (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); // Simulerer fremdriftsoppdatering hvert 500. ms
});

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

            

              
                Copy
              
            
          

Klientside (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 setter de riktige headerne for SSE.
• Serveren sender fremdriftsoppdateringer som data:-hendelser. Hver hendelse er et JSON-objekt som inneholder progress og et completed-flagg.
• React-komponenten bruker EventSource for å lytte etter disse hendelsene.
• Komponenten oppdaterer tilstanden (progress) basert på de mottatte hendelsene.

Fordeler: Nøyaktige fremdriftsoppdateringer, sanntidstilbakemelding.

Ulemper: Krever endringer på serversiden, mer kompleks implementering.

2. Polling med et API-endepunkt

Hvis du ikke kan bruke SSE eller WebSockets, kan du implementere polling. Klienten sender periodisk forespørsler til serveren for å sjekke statusen på operasjonen.

Eksempel:

Serverside (Node.js):

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

// Simuler en langvarig oppgave
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); // Generer en unik oppgave-ID

  // Simuler bakgrunnsbehandling
  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
              
            
          

Klientside (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); // Spør hvert 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
              
            
          

Forklaring:

• Klienten starter en oppgave ved å kalle /start-task, og mottar en taskId.
• Klienten spør deretter /task-status/:taskId periodisk for å få fremdriften.

Fordeler: Relativt enkelt å implementere, krever ikke vedvarende tilkoblinger.

Ulemper: Kan være mindre nøyaktig enn SSE/WebSockets, introduserer forsinkelse på grunn av polling-intervallet, og belaster serveren med hyppige forespørsler.

3. Optimistiske oppdateringer og heuristikk

I noen tilfeller kan du bruke optimistiske oppdateringer kombinert med heuristikk for å gi et rimelig estimat. Hvis du for eksempel laster opp filer, kan du spore antall bytes som er lastet opp på klientsiden og estimere fremdriften basert på den totale filstørrelsen.

Eksempel (Filopplasting):

            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'); // Erstatt med ditt opplastingsendepunkt
      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 bruker et XMLHttpRequest-objekt for å laste opp filen.
• Hendelseslytteren progress på xhr.upload brukes til å spore opplastingsfremdriften.
• Egenskapene loaded og total i hendelsen brukes til å beregne fullført prosentandel.

Fordeler: Kun på klientsiden, kan gi umiddelbar tilbakemelding.

Ulemper: Nøyaktigheten avhenger av påliteligheten til heuristikken, og er kanskje ikke egnet for alle typer operasjoner.

4. Bryte ned handlingen i mindre trinn

Hvis action-funksjonen utfører flere distinkte trinn, kan du oppdatere brukergrensesnittet etter hvert trinn for å indikere fremdrift. Dette krever at action-funksjonen endres for å gi oppdateringer.

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:

• Funksjonen myAction aksepterer en setProgress-callback.
• Den oppdaterer fremdriftstilstanden på ulike punkter under utførelsen.

Fordeler: Direkte kontroll over fremdriftsoppdateringer.

Ulemper: Krever endring av action-funksjonen, kan være mer komplisert å implementere hvis trinnene ikke er lett delbare.

Forutsi fullføringstid

Når du har fremdriftsoppdateringer, kan du bruke dem til å forutsi estimert gjenværende tid. En enkel tilnærming er å spore tiden det tar å nå et visst fremdriftsnivå og ekstrapolere for å estimere den totale tiden.

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)); // Sørg for at den ikke er negativ
    }
  }, [progress]);

  // ... (resten av komponenten og fremdriftsoppdateringer som beskrevet i tidligere seksjoner)

  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 lagrer starttiden når fremdriften oppdateres for første gang.
• Vi beregner medgått tid og bruker den til å estimere den totale tiden.
• Vi beregner gjenværende tid ved å trekke medgått tid fra den estimerte totale tiden.

Viktige hensyn:

• Nøyaktighet: Dette er en *veldig* forenklet forutsigelse. Nettverksforhold, serverbelastning og andre faktorer kan påvirke nøyaktigheten betydelig. Mer sofistikerte teknikker, som gjennomsnittsberegning over flere intervaller, kan forbedre nøyaktigheten.
• Visuell tilbakemelding: Indiker tydelig at tiden er et *estimat*. Å vise intervaller (f.eks. "Estimert gjenværende tid: 5-10 sekunder") kan være mer realistisk.
• Kanttilfeller: Håndter kanttilfeller der fremdriften er veldig treg i starten. Unngå å dele på null eller vise urimelig store estimater.

Kombinere useFormStatus med fremdriftsestimering

Selv om useFormStatus i seg selv ikke gir fremdriftsinformasjon, kan du bruke dens pending-egenskap til å aktivere eller deaktivere fremdriftsindikatoren. For eksempel:

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

// ... (Logikk for fremdriftsestimering fra tidligere eksempler)

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

  const handleSubmit = async (formData) => {
    // ... (Din logikk for skjemainnsending, inkludert oppdateringer av fremdrift)
  };

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

            

              
                Copy
              
            
          

I dette eksempelet vises fremdriftsindikatoren kun mens skjemaet er pending (dvs. mens useFormStatus.pending er true).

Beste praksis og hensyn

• Prioriter nøyaktighet: Velg en teknikk for fremdriftsestimering som passer for typen operasjon som utføres. SSE/WebSockets gir generelt de mest nøyaktige resultatene, mens heuristikk kan være tilstrekkelig for enklere oppgaver.
• Gi klar visuell tilbakemelding: Bruk fremdriftslinjer, spinnere eller andre visuelle signaler for å indikere at en operasjon pågår. Merk fremdriftsindikatoren tydelig, og om aktuelt, den estimerte gjenværende tiden.
• Håndter feil elegant: Hvis det oppstår en feil under operasjonen, vis en informativ feilmelding til brukeren. Unngå å la fremdriftsindikatoren bli stående på en bestemt prosentandel.
• Optimaliser ytelsen: Unngå å utføre beregningsmessig krevende operasjoner i UI-tråden, da dette kan påvirke ytelsen negativt. Bruk web workers eller andre teknikker for å flytte arbeid til bakgrunnstråder.
• Tilgjengelighet: Sørg for at fremdriftsindikatorer er tilgjengelige for brukere med nedsatt funksjonsevne. Bruk ARIA-attributter for å gi semantisk informasjon om fremdriften til operasjonen. Bruk for eksempel aria-valuenow, aria-valuemin og aria-valuemax på en fremdriftslinje.
• Lokalisering: Når du viser estimert gjenværende tid, vær oppmerksom på ulike tidsformater og regionale preferanser. Bruk et bibliotek som date-fns eller moment.js for å formatere tiden riktig for brukerens locale.
• Internasjonalisering: Feilmeldinger og annen tekst bør internasjonaliseres for å støtte flere språk. Bruk et bibliotek som i18next for å administrere oversettelser.

Konklusjon

Selv om Reacts useFormStatus-hook ikke direkte tilbyr funksjonalitet for fremdriftsestimering, kan du kombinere den med andre teknikker for å gi brukere meningsfull tilbakemelding under skjemainnsendinger. Ved å bruke SSE/WebSockets, polling, optimistiske oppdateringer eller ved å bryte ned handlinger i mindre trinn, kan du skape en mer engasjerende og brukervennlig opplevelse. Husk å prioritere nøyaktighet, gi klar visuell tilbakemelding, håndtere feil elegant og optimalisere ytelsen for å sikre en positiv opplevelse for alle brukere, uavhengig av deres plassering eller bakgrunn.

Videre utforskning

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