React-begrepp förklarade

En komponent i React är en funktion som tar emot data via props och returnerar det som ska visas. Komponenter kan vara så enkla som en knapp eller så komplexa som en hel sida — principen är densamma.

Gränssnittet i en React-app byggs upp av komponenter kapslade i varandra, ungefär som HTML-element men med egen logik och stil. En väldesignad komponent gör en sak och gör det bra, är enkel att återanvända i olika sammanhang, och är lätt att förstå utan att du behöver känna till resten av appen.

I Next.js är komponenter antingen server components (standardvalet, körs på servern) eller klientkomponenter markerade med 'use client'. Uppdelningen avgör var komponentens kod körs och vilka React-funktioner som är tillgängliga.

Hooks är funktioner som låter React-komponenter använda funktioner som state, sidoeffekter och kontext. Alla inbyggda hooks börjar med use: useState håller data som ändras över tid, useEffect kör kod som svar på förändringar, useContext läser delad data.

Du kan också skriva egna hooks för att kapsla in återanvändbar logik. En useWindowSize-hook som spårar fönsterstorleken kan återanvändas i vilken komponent som helst utan att duplicera logiken.

Hooks måste anropas på toppnivå i en komponent, aldrig inuti villkor, loopar eller andra funktioner. Det är en regel React kräver för att hålla ordning på anropssekvensen mellan renderingar.

State är data som en komponent håller reda på och som kan förändras under komponentens livstid. När state ändras ritar React om komponenten automatiskt, så det du ser i webbläsaren alltid stämmer med datan.

State skapas med hooken useState och lever i den komponent där den skapades. Vill du dela state med flera komponenter behöver du antingen lyfta det till en gemensam förälder eller använda Context.

State passar för data som är specifik för ett gränssnittselement, till exempel om en meny är öppen eller stängd, vad användaren skrivit i ett formulärfält, eller vilken flik som är aktiv.

Props är det sätt komponenter kommunicerar på i React — föräldrakomponenten skickar värden till barnkomponenten, ungefär som argument till en funktion. En knappkomponent kan ta emot en label och en onClick-funktion som props och på det sättet vara återanvändbar i hela appen.

Props är enkelriktade: data flödar alltid uppifrån och ner. Vill ett barn kommunicera tillbaka till sin förälder, skickar föräldern en callback-funktion som barnet anropar.

I TypeScript kan du typa props med ett interface eller en type-definition, vilket gör det tydligt exakt vad en komponent förväntar sig och vad som är valfritt.

JSX är en syntaxförlängning till JavaScript som låter dig skriva HTML-liknande kod direkt i dina funktioner. I stället för att anropa React.createElement('h1', null, 'Hej') skriver du bara <h1>Hej</h1>.

JSX kompileras till vanlig JavaScript av bundlern — det webbläsaren kör är inte JSX utan vanlig JS-kod. Du kan blanda JavaScript och JSX fritt med hjälp av klamrar: <p>{användarnamn}</p> renderar värdet av variabeln.

JSX är inte obligatoriskt i React men används av praktiskt taget alla React-projekt. I Next.js stödjer alla .js- och .jsx-filer JSX-syntax utan konfiguration.

Props kan bara skickas till direkta barnkomponenter — för att nå ett djupt nästlat barn måste du kedja props genom alla mellanliggande komponenter, kallat prop drilling. Context löser det: du skapar en context med createContext, omsluter trädet med en Provider som anger ett värde, och alla barnkomponenter kan läsa värdet direkt via useContext.

Context passar för global data som tema, inloggad användare eller språkinställning. Det är inte ett universalverktyg för all state — lokal state med useState är bättre för data som bara ett fåtal komponenter bryr sig om.

För komplex state-logik kombineras Context ofta med useReducer, eller ersätts av ett externt state-bibliotek som Zustand eller Jotai. I Next.js App Router kan server components läsa data direkt utan Context — Context behövs bara för klientstate.

I en kontrollerad komponent är ett formulärfälts värde kopplat till state via value-attributet och uppdateras via onChange-hanteraren. React har alltid full kontroll — du kan validera, transformera eller begränsa input i realtid.

Alternativet är en okontrollerad komponent där webbläsaren hanterar värdet och du läser det via en ref vid behov. Okontrollerade komponenter kräver mindre kod men ger sämre kontroll.

Kontrollerade komponenter passar de flesta formulärscenarier. Bibliotek som React Hook Form optimerar prestanda och minskar boilerplate — de använder en hybridstrategi som ger kontrollens fördelar utan onödiga omrenderingar.

I React används memoization via useMemo (cachar ett beräknat värde), useCallback (cachar en funktionsreferens) och React.memo (förhindrar omrendering av en komponent om props inte ändrats).

Memoization är en optimering som bara är värd kostnaden om beräkningen faktiskt är dyr eller om onödiga omrenderingar orsakar mätbara prestandaproblem. Att memoizera allt i onödan gör koden svårare att läsa utan mätbar nytta.

Profilera med React DevTools Profiler innan du memoizerar. De flesta komponenter renderar om tillräckligt snabbt att memoization inte gör skillnad — fokusera på fall där omrendering är faktiskt kostsam.

En ref skapas med useRef och returnerar ett objekt med en current-property. Det vanligaste användningsområdet är att hålla en referens till ett DOM-element — till exempel för att fokusera ett inputfält programmatiskt, starta uppspelning av en video, eller mäta ett elements dimensioner.

Till skillnad från state triggar en ändring av ref.current ingen omrendering. Det gör refs också användbara för att lagra värden som behöver överleva omrenderingar men inte ska trigga dem, som ett interval-ID eller ett tidigare state-värde.

I Next.js kan refs bara användas i klientkomponenter (use client). Server components har ingen DOM-åtkomst och behöver aldrig refs.

Suspense låter React visa en fallback-komponent — typiskt ett skelett eller laddningsindikator — medan ett barn väntar på att bli redo. Du omsluter det avvaktande barnet med <Suspense fallback={<Skeleton />}>.

I Next.js App Router integreras Suspense djupt med streaming: en server component som hämtar data kan suspenda, Next.js streamar ut en laddningsvy direkt och ersätter med det färdiga innehållet när det är klart. loading.js-filen i App Router är i grunden ett Suspense-gränssnitt.

Suspense gör att snabba delar av sidan syns omedelbart medan långsamma delar laddas in, utan att blockera hela sidan. Det förbättrar upplevd prestanda utan att du behöver skriva komplex laddningslogik manuellt.

useEffect är mekanismen för sidoeffekter i React-komponenter: operationer som inte handlar om att räkna ut vad som ska visas, utan om att interagera med omvärlden. Vanliga användningsfall är prenumeration på events, animationer och manuella DOM-manipulationer.

useEffect tar en funktion och en dependency array: effekten körs när komponenten mountas och när värdena i dependency array ändras. En cleanup-funktion kan returneras för att avregistrera prenumerationer när komponenten avmonteras.

I Next.js App Router kan du ofta ersätta useEffect-baserad datahämtning med server components och async/await direkt i komponenten. Det är renare, kräver ingen laddningsstate och kör på servern utan att skicka JavaScript till webbläsaren.