Optimalizácia komponentov pomocou useCallback v Reacte

Často je proces vykreslenia dôležitým faktorom v aplikáciách v React. Ak sú komponenty vykreslené zbytočne, môže to spomaliť aplikáciu. Na vyriešenie tohto problému React poskytuje hooky ako useCallback. V tomto návode sa dozvieš, ako pomocou useCallback optimalizovať výkon svojich komponentov, najmä pri používaní Callback-Props.

Hlavné poznatky

• useCallback ukladá funkciu medzi vykresľovacími cyklami.
• Správne použitie useCallback znižuje zbytočné vykresľovanie.
• Pri použití useCallback vždy dbaj na závislosti.

Krok za krokom návod

1. Úvod do Callback-Props

Aby si pochopil(a) fungovanie useCallback, najprv si musíš objasniť význam Callback-Props. Callback-Props sú funkcie, ktoré sa prenášajú na detské komponenty. V našom príklade máme jednoduchý komponent tlačidla, ktorý dostáva funkciu ako Prop na vykonanie akcie.

S touto štruktúrou si predstav, že pri vykreslení detskej komponenty sa Callback-funkcia stále znova vytvára. To znamená, že pri každom novom vykreslení nadradenej komponenty sa Callback-funkcia znova mení, aj keď jej logika zostáva rovnaká.

2. Implementácia bez useCallback

Predpokladajme, že si už vytvoril(a) svoj komponent tlačidla bez použitia useCallback. V tomto prípade môže tvoj kód vyzerať nasledovne: priamo deklaruješ funkciu onClick v nadradenej komponente. Ak sa teraz zmení stav nadradenej komponenty, tlačidlo sa znova vykreslí a tým sa Callback-funkcia znova vytvorí.

3. Úvod do useCallback

Tu vstupuje do hry useCallback. S useCallback môžeš "vyrobiť dočasné úložisko" pre svoju Callback-funkciu, takže sa opätovne vytvorí iba v prípade, že sa zmenia zadané závislosti. Aby si správne použil(a) useCallback, musíš svoju Callback-funkciu obaliť v Hook.

To spôsobí, že pôvodná funkcia zostáva uložená, kým sa závislosti nezmenia. To znamená, že pri opakovanom vykresľovaní nadradenej komponenty zostáva stará funkcia stále zachovaná, pokiaľ sa závislosti nemenia.

4. Definovanie závislostí

Toto je tiež kľúčový bod pri použití useCallback. Musíš dbať na definovanie správnych závislostí v prázdnom poli. Ak si viazal(a) funkciu na premenné, tieto premenné by mali byť v poli závislosti.

Pri vykonaní zmien v stave, React pochopí, že funkcia sa musí znova vytvoriť, keďže sa zmenila jedna z uvedených premenných.

5. Testovanie implementácie

Pre overenie správnosti implementácie môžeš testovať aplikáciu vo webovom prehliadači. Ak kliknete na tlačidlo bez použitia useCallback, uvidíte, že sa tlačidlo a ostatné komponenty stále znovu vykresľujú.

Teraz pridaj useCallback a pozri si výkon. Ak je všetko správne implementované, vykresľovanie tlačidla prestane, keď sa Prop už nemení.

6. Výhody a nevýhody

Je dôležité zvážiť použitie useCallback. Vo veľa prípadoch jeho použitie vyžaduje dodatočnú prácu a môže sa stať, že optimalizácia nie je nevyhnutná v jednoduchších komponentoch. Skontroluj teda, či má zmysel použiť useCallback na základe zložitosti tvojej komponenty.

Vezmi na vedomie, že useCallback prináša skutočné výhody iba v prípade, že používaš aj optimalizáciu memo. V opačnom prípade môžeš pristupovať iba k rovnakej Callback-funkcii, zatiaľ čo sa tvoja komponenta stále znovu vykresľuje.

Zhrnutie

Implementácia useCallback ti umožňuje vyhnúť sa zbytočným vykresleniam a optimalizovať výkon svojej aplikácie v Reacte. Venuj vždy pozornosť správnym závislostiam a zváž použitie Hooku v závislosti na zložitosti svojej komponenty.