React useActionState: Debouncing'u rakendamine optimaalseks tegevuste sageduse piiramiseks

Kaasaegsetes veebirakendustes on kasutajate interaktsioonide tõhus käsitlemine esmatähtis. Tegevused nagu vormide esitamine, otsingupäringud ja andmete uuendamine käivitavad sageli serveripoolseid operatsioone. Kuid liiga sagedased serverikutseid, eriti kui need käivitatakse kiiresti üksteise järel, võivad põhjustada jõudluse kitsaskohti ja halvendada kasutajakogemust. Siin tulebki mängu debouncing ja Reacti useActionState hook pakub selleks võimsa ja elegantse lahenduse.

Mis on debouncing?

Debouncing on programmeerimispraktika, mida kasutatakse tagamaks, et aeganõudvad ülesanded ei käivituks liiga sageli, lükates funktsiooni täitmise edasi kuni teatud tegevusetuse perioodi lõpuni. Mõelge sellest nii: kujutage ette, et otsite toodet e-poe veebisaidilt. Ilma debouncing'uta käivitaks iga klahvivajutus otsinguribal uue päringu serverile otsingutulemuste hankimiseks. See võib serveri üle koormata ja pakkuda kasutajale katkendlikku ja mittereageerivat kogemust. Debouncing'uga saadetakse otsingupäring alles siis, kui kasutaja on lühikese aja (nt 300 millisekundit) jooksul tippimise lõpetanud.

Miks kasutada useActionState'i debouncing'u jaoks?

React 18-s tutvustatud useActionState pakub mehhanismi tegevustest tulenevate asünkroonsete olekuvärskenduste haldamiseks, eriti React Server Components'i raames. See on eriti kasulik serveri tegevustega, kuna see võimaldab hallata laadimise olekuid ja vigu otse oma komponendis. Koos debouncing'u tehnikatega pakub useActionState puhast ja jõudsat viisi kasutaja sisendist käivitatud serveri interaktsioonide haldamiseks. Enne useActionState'i hõlmas sellise funktsionaalsuse rakendamine sageli oleku käsitsi haldamist useState'i ja `useEffect`'iga, mis viis pikema ja potentsiaalselt vigaderohkema koodini.

Debouncing'u rakendamine useActionState'iga: samm-sammuline juhend

Uurime praktilist näidet debouncing'u rakendamisest useActionState'i abil. Vaatleme stsenaariumi, kus kasutaja kirjutab sisestusväljale ja me tahame uuendada serveripoolset andmebaasi sisestatud tekstiga, kuid alles pärast lühikest viivitust.

Samm 1: Põhikomponendi seadistamine

Esiteks loome lihtsa funktsionaalse komponendi sisestusväljaga:

            import React, { useState, useCallback } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simuleerime andmebaasi uuendust
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simuleerime võrgu latentsust
  return { success: true, message: `Uuendatud tekstiga: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);
  };

  return (
    <form action={dispatch}>
      <input type="text" name="text" value={debouncedText} onChange={handleChange} />
      <button type="submit">Uuenda</button>
      <p>{state.message}</p>
    </form>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Selles koodis:

• Impordime vajalikud hook'id: useState, useCallback ja useActionState.
• Defineerime asünkroonse funktsiooni updateDatabase, mis simuleerib serveripoolset uuendust. See funktsioon võtab argumentideks eelmise oleku ja vormi andmed.
• useActionState initsialiseeritakse updateDatabase funktsiooni ja algse olekuobjektiga.
• Funktsioon handleChange uuendab kohalikku olekut debouncedText sisestusväärtusega.

Samm 2: Debounce'i loogika rakendamine

Nüüd lisame debouncing'u loogika. Kasutame funktsioone setTimeout ja clearTimeout, et viivitada useActionState'i poolt tagastatud dispatch-funktsiooni kutset.

            import React, { useState, useRef, useCallback } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simuleerime andmebaasi uuendust
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simuleerime võrgu latentsust
  return { success: true, message: `Uuendatud tekstiga: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});
  const timeoutRef = useRef(null);

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = window.setTimeout(() => {
      const formData = new FormData();
      formData.append('text', newText);
      dispatch(formData);
    }, 300);
  };

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Mis on muutunud:

• Lisasime useRef hook'i nimega timeoutRef, et salvestada taimeri ID. See võimaldab meil taimeri tühistada, kui kasutaja uuesti tipib enne viivituse möödumist.
• handleChange'i sees:
• Tühistame olemasoleva taimeri, kasutades clearTimeout, kui timeoutRef.current'il on väärtus.
• Seame uue taimeri, kasutades setTimeout. See taimer käivitab dispatch-funktsiooni (uuendatud vormiandmetega) pärast 300-millisekundilist tegevusetust.
• Viisime dispatch-kutse vormist välja ja debounce'itud funktsiooni sisse. Nüüd kasutame vormi asemel standardset sisestuselementi ja käivitame serveri tegevuse programmiliselt.

Samm 3: Jõudluse ja mälulekete optimeerimine

Eelnev lahendus on funktsionaalne, kuid seda saab veelgi optimeerida, et vältida potentsiaalseid mälulekkeid. Kui komponent eemaldatakse, kui taimer on veel ootel, käivitub taimeri tagasikutse ikkagi, mis võib põhjustada vigu või ootamatut käitumist. Saame seda vältida, tühistades taimeri useEffect hook'is, kui komponent eemaldatakse:

            import React, { useState, useRef, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simuleerime andmebaasi uuendust
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simuleerime võrgu latentsust
  return { success: true, message: `Uuendatud tekstiga: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});
  const timeoutRef = useRef(null);

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = window.setTimeout(() => {
      const formData = new FormData();
      formData.append('text', newText);
      dispatch(formData);
    }, 300);
  };

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Lisasime useEffect hook'i tühja sõltuvuste massiiviga. See tagab, et efekt käivitub ainult siis, kui komponent paigaldatakse ja eemaldatakse. Efekti puhastusfunktsiooni (mida efekt tagastab) sees tühistame taimeri, kui see eksisteerib. See takistab taimeri tagasikutse käivitumist pärast komponendi eemaldamist.

Alternatiiv: Debounce'i teegi kasutamine

Kuigi ülaltoodud rakendus demonstreerib debouncing'u põhikontseptsioone, võib spetsiaalse debounce'i teegi kasutamine koodi lihtsustada ja vigade riski vähendada. Teegid nagu lodash.debounce pakuvad robustseid ja hästi testitud debouncing'u implementatsioone.

Siin on, kuidas saate kasutada lodash.debounce'i koos useActionState'iga:

            import React, { useState, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';
import debounce from 'lodash.debounce';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simuleerime andmebaasi uuendust
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simuleerime võrgu latentsust
  return { success: true, message: `Uuendatud tekstiga: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});

  const debouncedDispatch = useCallback(debounce((text: string) => {
    const formData = new FormData();
    formData.append('text', text);
    dispatch(formData);
  }, 300), [dispatch]);

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);
    debouncedDispatch(newText);
  };

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Selles näites:

• Impordime debounce-funktsiooni teegist lodash.debounce.
• Loome dispatch-funktsiooni debounce'itud versiooni, kasutades useCallback'i ja debounce'i. Hook useCallback tagab, et debounce'itud funktsioon luuakse ainult üks kord, ja sõltuvuste massiiv sisaldab dispatch'i, et tagada debounce'itud funktsiooni uuendamine, kui dispatch-funktsioon muutub.
• Funktsioonis handleChange kutsume lihtsalt debouncedDispatch-funktsiooni uue tekstiga.

Globaalsed kaalutlused ja parimad praktikad

Debouncing'u rakendamisel, eriti globaalsele publikule suunatud rakendustes, kaaluge järgmist:

• Võrgu latentsus: Võrgu latentsus võib oluliselt erineda sõltuvalt kasutaja asukohast ja võrgutingimustest. Debounce'i viivitus, mis töötab hästi ühes piirkonnas asuvate kasutajate jaoks, võib olla liiga lühike või liiga pikk teises piirkonnas asuvate kasutajate jaoks. Kaaluge kasutajatel debounce'i viivituse kohandamise lubamist või viivituse dünaamilist kohandamist vastavalt võrgutingimustele. See on eriti oluline rakenduste puhul, mida kasutatakse ebausaldusväärse internetiühendusega piirkondades, näiteks osades Aafrikas või Kagu-Aasias.
• Sisestusmeetodi redaktorid (IME-d): Paljudes Aasia riikides kasutavad kasutajad teksti sisestamiseks IME-sid. Need redaktorid nõuavad sageli mitut klahvivajutust ühe tähemärgi koostamiseks. Kui debounce'i viivitus on liiga lühike, võib see segada IME protsessi, põhjustades frustreerivat kasutajakogemust. Kaaluge debounce'i viivituse pikendamist IME-sid kasutavate kasutajate jaoks või kasutage sündmuste kuularit, mis sobib paremini IME kompositsiooniga.
• Juurdepääsetavus: Debouncing võib potentsiaalselt mõjutada juurdepääsetavust, eriti liikumispuudega kasutajate jaoks. Veenduge, et debounce'i viivitus ei oleks liiga pikk, ja pakkuge kasutajatele vajadusel alternatiivseid viise tegevuse käivitamiseks. Näiteks võiksite pakkuda esitamisnuppu, mida kasutajad saavad tegevuse käsitsi käivitamiseks klõpsata.
• Serveri koormus: Debouncing aitab vähendada serveri koormust, kuid siiski on oluline optimeerida serveripoolset koodi, et päringuid tõhusalt käsitleda. Kasutage vahemälu, andmebaasi indekseerimist ja muid jõudluse optimeerimise tehnikaid, et minimeerida serveri koormust.
• Vigade käsitlemine: Rakendage robustne vigade käsitlemine, et graatsiliselt hallata kõiki vigu, mis tekivad serveripoolse uuendusprotsessi käigus. Kuvage kasutajale informatiivseid veateateid ja pakkuge võimalusi tegevuse uuesti proovimiseks.
• Kasutaja tagasiside: Andke kasutajale selget visuaalset tagasisidet, et näidata, et nende sisendit töödeldakse. See võib hõlmata laadimisspinnerit, edenemisriba või lihtsat teadet nagu "Uuendan...". Ilma selge tagasisideta võivad kasutajad segadusse sattuda või frustreeruda, eriti kui debounce'i viivitus on suhteliselt pikk.
• Lokaliseerimine: Veenduge, et kogu tekst ja teated oleksid erinevate keelte ja piirkondade jaoks korralikult lokaliseeritud. See hõlmab veateateid, laadimisindikaatoreid ja muud teksti, mida kasutajale kuvatakse.

Näide: Otsinguriba debouncing

Vaatleme konkreetsemat näidet: otsinguriba e-kaubanduse rakenduses. Soovime otsingupäringut debounce'ida, et vältida liiga paljude päringute saatmist serverile kasutaja tippimise ajal.

            import React, { useState, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';
import debounce from 'lodash.debounce';

async function searchProducts(prevState: any, formData: FormData) {
  // Simuleerime tooteotsingut
  const query = formData.get('query') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simuleerime võrgu latentsust
  // Reaalses rakenduses hangiksite siin otsingutulemused andmebaasist või API-st
  const results = [`Toode A, mis vastab päringule "${query}"`, `Toode B, mis vastab päringule "${query}"`];
  return { success: true, message: `Otsingutulemused päringule: ${query}`, results: results };
}

function SearchBar() {
  const [searchQuery, setSearchQuery] = useState('');
  const [state, dispatch] = useActionState(searchProducts, {success: false, message: "", results: []});
  const [searchResults, setSearchResults] = useState([]);

  const debouncedSearch = useCallback(debounce((query: string) => {
    const formData = new FormData();
    formData.append('query', query);
    dispatch(formData);
  }, 300), [dispatch]);

  const handleChange = (event: React.ChangeEvent) => {
    const newQuery = event.target.value;
    setSearchQuery(newQuery);
    debouncedSearch(newQuery);
  };

  useEffect(() => {
    if(state.success){
      setSearchResults(state.results);
    }
  }, [state]);

  return (
    <div>
      <input type="text" placeholder="Otsi tooteid..." value={searchQuery} onChange={handleChange} />
      <p>{state.message}</p>
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchBar;

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas debounce'ida otsingupäringut, kasutades lodash.debounce'i ja useActionState'i. Funktsioon searchProducts simuleerib tooteotsingut ja komponent SearchBar kuvab otsingutulemused. Reaalses rakenduses hangiks funktsioon searchProducts otsingutulemused taustaprogrammi API-st.

Põhilisest debouncing'ust kaugemale: täiustatud tehnikad

Kuigi ülaltoodud näited demonstreerivad põhilist debouncing'ut, on olemas täiustatud tehnikaid, mida saab kasutada jõudluse ja kasutajakogemuse edasiseks optimeerimiseks:

• Leading Edge Debouncing: Standardse debouncing'u puhul käivitatakse funktsioon pärast viivitust. Leading edge debouncing'u puhul käivitatakse funktsioon viivituse alguses ja järgnevaid kutseid viivituse ajal ignoreeritakse. See võib olla kasulik stsenaariumides, kus soovite anda kasutajale kohest tagasisidet.
• Trailing Edge Debouncing: See on standardne debouncing'u tehnika, kus funktsioon käivitatakse pärast viivitust.
• Throttling: Throttling sarnaneb debouncing'uga, kuid selle asemel, et funktsiooni täitmist edasi lükata kuni tegevusetuse perioodi lõpuni, piirab throttling funktsiooni kutsumise sagedust. Näiteks võiksite piirata funktsiooni kutsumist maksimaalselt kord 100 millisekundi jooksul.
• Adaptiivne debouncing: Adaptiivne debouncing kohandab debounce'i viivitust dünaamiliselt vastavalt kasutaja käitumisele või võrgutingimustele. Näiteks võiksite vähendada debounce'i viivitust, kui kasutaja tipib väga aeglaselt, või suurendada viivitust, kui võrgu latentsus on kõrge.

Kokkuvõte

Debouncing on oluline tehnika interaktiivsete veebirakenduste jõudluse ja kasutajakogemuse optimeerimiseks. Reacti useActionState hook pakub võimsa ja elegantse viisi debouncing'u rakendamiseks, eriti koos React Server Components'i ja serveri tegevustega. Mõistes debouncing'u põhimõtteid ja useActionState'i võimekust, saavad arendajad ehitada reageerivaid, tõhusaid ja kasutajasõbralikke rakendusi, mis skaleeruvad globaalselt. Pidage meeles arvestada selliste teguritega nagu võrgu latentsus, IME kasutamine ja juurdepääsetavus, kui rakendate debouncing'ut globaalsele publikule suunatud rakendustes. Valige õige debouncing'u tehnika (leading edge, trailing edge või adaptiivne) vastavalt oma rakenduse konkreetsetele nõuetele. Kasutage teeke nagu lodash.debounce, et lihtsustada implementeerimist ja vähendada vigade riski. Järgides neid juhiseid, saate tagada, et teie rakendused pakuvad sujuvat ja nauditavat kogemust kasutajatele üle kogu maailma.