AI Verket
AIbua

Forklar React-kode

Lim inn en React-komponent eller JSX og få den forklart på vanlig norsk. Verktøyet forklarer hva hooks gjør, når komponenten tegnes på nytt og hvordan props og state henger sammen.

Koden lagres aldri, og alt behandles i EU.

Eksempler å starte med
0 / 10 000

React-fellene de fleste går i

React virker enkelt helt til en komponent tegnes på nytt for ofte eller en effekt kjører på feil tidspunkt. Verktøyet forklarer hvorfor:

Reglene for hooks
Hooks må kalles på toppnivå i komponenten – aldri inne i en `if`, løkke eller etter en `return`.
Re-renders
Komponenten kjører på nytt hver gang state eller props endres. Tung beregning her merkes raskt.
`useEffect`-avhengigheter
Listen i `[...]` styrer når effekten kjører. Glem en avhengighet, og du får gammel data eller en evig løkke.
`key` i lister
Hvert element i en `map` trenger en stabil `key`, ellers blander React radene ved oppdatering.
State er uforanderlig
Endre aldri state direkte. Lag en ny verdi og send den til setter-funksjonen.

Ofte stilte spørsmål

Lagres React-koden min?
Nei. Alt behandles i minnet og slettes straks forklaringen er ferdig.
Forstår det både JSX og TSX?
Ja. Verktøyet forklarer både ren JavaScript-JSX og TypeScript-komponenter med typer på props.
Kan jeg lime inn en hel komponentfil?
Ja, opptil 10 000 tegn. For store komponenter er det tydeligere å forklare én av gangen.
Forklarer det hvorfor noe tegnes på nytt for ofte?
Ja. Verktøyet peker på vanlige årsaker som nye objekt-/funksjonsreferanser i props og manglende memoisering.
Er det gratis?
Du får flere gratis forklaringer daglig. Logg inn for høyere grense, eller velg Pro for ubegrenset bruk.

Andre varianter

Relaterte verktøy