React-hookitExplained

24 of 24 rows

Hook↕	Mitä se tekee↕	Käytä sitä↕
Tila
⤢useState	Pitää yhden arvon, joka laukaisee uudelleenrenderöinnin muuttuessaan.	Komponentin paikallinen tila: lomakekentät, kytkimet, laskurit.
⤢useReducer	Pitää action-reducerin ohjaamaa tilaa, kuin pienen storen.	Tila, jossa on useita toisiinsa liittyviä kenttiä tai monimutkaisia siirtymiä.
⤢useRef	Pitää muuttuvan arvon, joka EI laukaise uudelleenrenderöintiä.	Muuttuvat säiliöt, ajastimet ja suora DOM-pääsy .current-kentän kautta.
Efektit
⤢useEffect	Suorittaa sivuvaikutuksen renderöinnin jälkeen, valinnaisella siivouksella.	Datan hakeminen, tilaaukset ja synkronointi ulkoisen järjestelmän kanssa.
⤢Effect cleanup	Efektin palauttama funktio suoritetaan ennen seuraavaa efektiä ja vielä uudelleen unmount-vaiheessa.	Tilausten ja ajastinten purkaminen tai kesken olevan haun peruuttaminen.
⤢useLayoutEffect	Kuten useEffect, mutta suoritetaan synkronisesti DOM-muutoksen jälkeen.	Asettelun luku tai kirjoitus ennen kuin selain maalaa (toastit, työkaluvihjeet).
⤢useEffect vs handlers	Tapahtumakäsittelijät suoritetaan vastauksena käyttäjän toimintaan; efektit suoritetaan renderöinnin jälkeen synkronointia varten.	Käyttäjän aiheuttama logiikka kuuluu käsittelijään, renderöinnin aiheuttama efektiin.
⤢StrictMode	Kehitystilassa mounttaa komponentit kahdesti, joten efektit suoritetaan, siivotaan ja suoritetaan uudelleen.	Kaksoistilausten ja puuttuvan siivouksen paljastaminen ennen tuotantoa.
Suorituskyky
⤢useMemo	Välimuistittaa lasketun arvon, kunnes sen riippuvuudet muuttuvat.	Kalliiden uudelleenlaskujen välttäminen renderöintien välissä; tyhjennä välimuisti tahallaan muuttamalla yhtä riippuvuuden arvoa.
⤢useCallback	Välimuistittaa funktioreferenssin, kunnes sen riippuvuudet muuttuvat.	Vakaat callbackit, jotka annetaan memoisoiduille lapsille tai käytetään riippuvuuksina.
⤢React.memo	Ohittaa komponentin uudelleenrenderöinnin, jos sen propsit eivät ole muuttuneet.	Raskaat lapsikomponentit; anna vertailufunktio toisena argumenttina, kun matala vertailu ei riitä (HOC, ei hook).
Konteksti ja ulkoiset kahvat
⤢useContext	Lukee kontekstin arvon ilman prop-drillingiä.	Teema, locale tai kirjautunut käyttäjä jaettuna koko puuhun.
⤢useImperativeHandle	Mukauttaa instanssia, jonka vanhempi näkee refin läpi.	Keskittyneen API:n paljastaminen lapsesta forwardRef:n avulla.
Rinnakkaisuus ja muut
⤢useTransition	Merkitsee tilapäivityksen ei-kiireelliseksi, jotta UI pysyy vastaanottavaisena.	Syötteen pitäminen napakkana, kun raskas lista renderöityy uudelleen.
⤢useDeferredValue	Lykkää arvoa, jotta päivitykset voidaan keskeyttää.	Kalliiden renderöintien debouncointi ilman ajastimia.
⤢useId	Tuottaa vakaan, uniikin id:n saavutettavuusattribuuteille.	Labelin ja inputin yhdistäminen palvelin- ja asiakaspuolen renderöinneissä.
⤢use()	Lukee promisen tai kontekstin renderöinnin aikana; ainoa ehdollisesti kutsuttava hook.	Promisen purkaminen Suspensen kanssa tai kontekstin lukeminen aikaisessa paluussa.
⤢useActionState	Pitää lomakeaktion ohjaamaa tilaa, pending-lippu mukaanlukien.	Lomakkeen lähetykset, jotka palauttavat virheitä tai päivitettyä tilaa näytettäväksi sivulla.
⤢useOptimistic	Renderöi optimistisen arvon heti ja palaa todelliseen tilaan, kun action valmistuu.	Tykkäyksen tai lähetetyn viestin näyttäminen, kun sen palvelinpyyntö on vielä kesken.
⤢useFormStatus	Lukee ympäröivän <form>:in pending-tilan ilman propseja.	Lähetyspainike, joka poistuu käytöstä, kun sen vanhempi lomake lähetetään.
⤢useSyncExternalStore	Tilaa Reactin ulkopuolinen store ja lukee yhden johdonmukaisen tilannekuvan.	Selainrajapinnat kuten verkkotila tai kolmannen osapuolen tilastoret.
⤢useInsertionEffect	Suoritetaan ennen layout-efektejä; tehty CSS-in-JS-sääntöjen injektointiin.	Tyylikirjastot, joiden on lisättävä säännöt ennen asettelun lukemista.
⤢useDebugValue	Näyttää mukautetun nimikkeen hookin sisäisestä tilasta React DevToolsissa.	Oman hookin sisällön nimeäminen debuggauksen aikana.
⤢Custom hooks (use*)	Oma hookkisi, joka yhdistää sisäänrakennettuja hookeja logiikan jakamiseksi.	Uudelleenkäytettävä tilallinen toiminta kuten useFetch tai useMediaQuery.