Lär dig React 19 från grunden — JSX, komponenter, props, state, hooks, context, custom hooks och projektstruktur.
React har sedan lanseringen 2013 dominerat frontend-utvecklingen och 2026 är det fortfarande det mest använda ramverket för webbapplikationer. Med React 19 har ramverket mognat ytterligare med förbättrad prestanda, stabilare hooks och en renare utvecklarupplevelse. Reacts komponentbaserade arkitektur, deklarativa syntax och enorma ekosystem gör det till ett självklart val för allt från mindre widgets till komplexa SaaS-plattformar.
Den här guiden tar dig från grunderna i React — komponenter, JSX och props — till avancerade mönster som custom hooks, context och felhantering. Du lär dig hur du strukturerar ett React-projekt, vilka hooks som används när, och hur React 19 skiljer sig från tidigare versioner. Alla exempel använder TypeScript och moderna React-mönster.
React 19 — vad är nytt?
React 19, som släpptes i slutet av 2025, är den största uppdateringen sedan React 18. De viktigaste nyheterna inkluderar: React Server Components (RSC) som standard, Actions för hantering av formulär och mutationer, use()-hooken för att hantera promises direkt i render, ref som prop (ingen need för forwardRef), och förbättrad concurrent rendering med automatisk batching. React 19 är också snabbare — den nya kompilatorn React Forget (nu kallad React Compiler) optimerar din kod automatiskt utan att du behöver använda useMemo och useCallback manuellt.
För nya projekt 2026 är det bara React 19 som gäller. För befintliga projekt är migreringen från 18 relativt smärtfri; de största ändringarna är att vissa föråldrade API:er tagits bort och att React Compiler kräver en översyn av memoization.
Skapa ett nytt React-projekt
Det enklaste sättet att starta ett React-projekt 2026 är med Vite, som har ersatt Create React App som standardverktyg:
| 1 | npm create vite@latest mitt-projekt -- --template react-ts |
| 2 | cd mitt-projekt |
| 3 | npm install |
| 4 | npm run dev |
Vite ger dig snabb utvecklingsserver med HMR (Hot Module Replacement), TypeScript-stöd ur lådan, och modern build-pipeline baserad på Rollup. För fullstack-applikationer är Next.js med App Router standard (se separat guide), men för rena frontend-applikationer eller komponentbibliotek är Vite + React 19 den bästa kombinationen 2026.
Komponenter och JSX
React-applikationer byggs av komponenter — återanvändbara, självförsörjande enheter som renderar en del av användargränssnittet. En komponent är helt enkelt en funktion som returnerar JSX — en syntax som ser ut som HTML men som kompileras till JavaScript:
| 1 | interface Props { |
| 2 | name: string |
| 3 | age?: number |
| 4 | } |
| 5 | |
| 6 | function UserCard({ name, age }: Props) { |
| 7 | return ( |
| 8 | <div className="user-card"> |
| 9 | <h2>{name}</h2> |
| 10 | {age && <p>Ålder: {age}</p>} |
| 11 | </div> |
| 12 | ) |
| 13 | } |
JSX låter dig blanda HTML-liknande markup med JavaScript-uttryck inom klamrar. Varje komponent bör göra en sak — om en komponent blir för stor, dela upp den i mindre subkomponenter. Bra komponentdesign är nyckeln till underhållbar React-kod.
Props — skicka data mellan komponenter
Props (egenskaper) är det sätt du skickar data från en förälderkomponent till en barnkomponent. Props är read-only — en komponent ska aldrig ändra sina egna props. TypeScript gör props typsäkra och självdokumenterande:
| 1 | interface ButtonProps { |
| 2 | label: string |
| 3 | variant: "primary" | "secondary" |
| 4 | onClick: () => void |
| 5 | disabled?: boolean |
| 6 | } |
| 7 | |
| 8 | function Button({ label, variant, onClick, disabled }: ButtonProps) { |
| 9 | return ( |
| 10 | <button |
| 11 | className={`btn btn-${variant}`} |
| 12 | onClick={onClick} |
| 13 | disabled={disabled} |
| 14 | > |
| 15 | {label} |
| 16 | </button> |
| 17 | ) |
| 18 | } |
Mönstret med typsäkra props via TypeScripts interface är standard 2026 och rekommenderas starkt för alla projekt. Det fångar fel vid kompilering istället för vid körning och ger utmärkt IDE-support med autocomplete.
State — useState, useReducer och useState
State är komponentens minne. Med useState skapar du lokalt state som komponenten kan ändra. När state uppdateras återrenderas komponenten automatiskt:
| 1 | function Counter() { |
| 2 | const [count, setCount] = useState(0) |
| 3 | return <button onClick={() => setCount(c => c + 1)}>{count}</button> |
| 4 | } |
För mer komplext state med flera relaterade värden använder du useReducer — särskilt användbart när state-uppdateringar har olika typer eller beror på tidigare state:
| 1 | type Action = { type: "increment" } | { type: "decrement" } | { type: "reset"; payload: number } |
| 2 | function reducer(state: number, action: Action): number { |
| 3 | switch (action.type) { |
| 4 | case "increment": return state + 1 |
| 5 | case "decrement": return state - 1 |
| 6 | case "reset": return action.payload |
| 7 | } |
| 8 | } |
useEffect — sidoeffekter och livscykel
useEffect låter dig utföra sidoeffekter i dina komponenter — datahämtning, prenumerationer, DOM-manipulation eller timer-hantering. Effekten körs efter att komponenten renderats, och du kan styra när den körs med en dependency-array:
| 1 | function UserProfile({ userId }: { userId: string }) { |
| 2 | const [user, setUser] = useState<User | null>(null) |
| 3 | |
| 4 | useEffect(() => { |
| 5 | fetch(`/api/users/${userId}`) |
| 6 | .then(res => res.json()) |
| 7 | .then(setUser) |
| 8 | }, [userId]) // Körs bara när userId ändras |
| 9 | |
| 10 | if (!user) return <Spinner /> |
| 11 | return <div>{user.name}</div> |
| 12 | } |
I React 19 kan du ofta ersätta useEffect för datahämtning med use()-hooken eller med React Server Components (i Next.js). Använd useEffect främst för interaktioner med webbläsarens API eller prenumerationer på externa händelser.
useMemo och useCallback — prestandaoptimering
React Compiler i React 19 gör useMemo och useCallback onödiga i de flesta fall — kompilatorn optimerar automatiskt. Men det är bra att förstå dem för fall där du behöver explicit kontroll.
useMemo memoizerar ett beräknat värde så att det bara räknas om när dess dependencies ändras. useCallback memoizerar en funktion så att den behåller samma referens mellan renderingar. Använd dem sparsamt och bara när du faktiskt mäter en prestandaproblem — överanvändning gör koden svårare att läsa utan att ge mätbar nytta.
Context — dela state utan prop drilling
React Context låter dig dela värden (tema, språk, användarinfo) med hela komponentträdet utan att skicka props genom varje nivå. Skapa en context, en provider och en konsument-hook:
| 1 | interface Theme { |
| 2 | mode: "light" | "dark" |
| 3 | accent: string |
| 4 | } |
| 5 | |
| 6 | const ThemeContext = createContext<Theme>({ mode: "light", accent: "#0070f3" }) |
| 7 | |
| 8 | function App() { |
| 9 | return ( |
| 10 | <ThemeContext.Provider value={{ mode: "dark", accent: "#ff4081" }}> |
| 11 | <UserCard /> |
| 12 | </ThemeContext.Provider> |
| 13 | ) |
| 14 | } |
| 15 | |
| 16 | function UserCard() { |
| 17 | const theme = useContext(ThemeContext) |
| 18 | return <div style={{ background: theme.mode === "dark" ? "#333" : "#fff" }}>...</div> |
| 19 | } |
Context är utmärkt för globala värden som ändras sällan. För tillstånd som ändras ofta (t.ex. formulärdata eller scroll-position) överväg ett state management-bibliotek som Zustand eller Jotai istället — de ger bättre prestanda med selektiva uppdateringar.
Custom hooks — återanvändbar logik
Custom hooks är Reacts främsta verktyg för att dela logik mellan komponenter. En custom hook är en funktion som börjar med use och kan använda andra hooks:
| 1 | function useLocalStorage<T>(key: string, initial: T) { |
| 2 | const [value, setValue] = useState<T>(() => { |
| 3 | const stored = localStorage.getItem(key) |
| 4 | return stored ? JSON.parse(stored) : initial |
| 5 | }) |
| 6 | |
| 7 | useEffect(() => { |
| 8 | localStorage.setItem(key, JSON.stringify(value)) |
| 9 | }, [key, value]) |
| 10 | |
| 11 | return [value, setValue] as const |
| 12 | } |
Bygg upp ett bibliotek av custom hooks för återkommande mönster: formulärhantering, API-anrop, scroll-position, media-queries, och webbSockets. Bra custom hooks gör din kod DRY (Don't Repeat Yourself) och separerar logik från presentation.
Error boundaries — hantera fel graciöst
Ett fel i en React-komponent kan krascha hela applikationen om det inte hanteras. Error boundaries är komponenter som fångar fel i sitt underträd och visar en reserv-UI istället. I React 19 kan du använda errorElement från React Router eller bygga en egen med komponenten ErrorBoundary:
| 1 | function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) { |
| 2 | return ( |
| 3 | <div role="alert"> |
| 4 | <p>Något gick fel:</p> |
| 5 | <pre>{error.message}</pre> |
| 6 | <button onClick={resetErrorBoundary}>Försök igen</button> |
| 7 | </div> |
| 8 | ) |
| 9 | } |
Omslut varje större sektion av din applikation med en error boundary så att ett fel i kommentarsfältet inte kraschar hela sidan. Kombinera med en global error boundary för ohanterade fel och logga till en tjänst som Sentry eller Datadog.
Projektstruktur — organisera din kod
En bra projektstruktur är avgörande för underhållbarhet och skalbarhet. Standardmönster 2026 för ett React-projekt är:
| 1 | src/ |
| 2 | features/ # Funktionella moduler (auth, dashboard, settings) |
| 3 | components/ # Delade, återanvändbara komponenter |
| 4 | hooks/ # Custom hooks |
| 5 | lib/ # Bibliotek och hjälpfunktioner (api, utils) |
| 6 | types/ # TypeScript-typer och interfaces |
| 7 | styles/ # Globala stilar, tema-variabler |
Feature-strukturen innebär att varje funktionell modul har sin egen mapp med komponenter, hooks och typer. Detta gör det enkelt att navigera, testa och eventuellt extrahera en modul till ett separat paket. Undvik en platt struktur där alla komponenter ligger i en enda mapp — det blir snabbt ohanterbart.
React 19-specifika funktioner
React 19 introducerar use() — en hook som låter dig läsa ett promise direkt under render. Detta förenklar datahämtning dramatiskt och fungerar med React Suspense för att visa loading-state:
| 1 | function Comments({ promise }: { promise: Promise<Comment[]> }) { |
| 2 | const comments = use(promise) |
| 3 | return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul> |
| 4 | } |
React 19 har också Actions för formulärhantering — useActionState och useFormStatus gör det enkelt att hantera formulärinlämning med pending-state och validering. Och ref som direkt prop eliminerar behovet av forwardRef, vilket förenklar komponenter som behöver exponera en DOM-referens.
Sammanfattning
React 19 är en mogen, kraftfull och produktiv plattform för att bygga moderna webbapplikationer. Du har nu lärt dig grunderna i komponenter, JSX, props, state, hooks, context och projektstruktur. Med React Compiler, Server Components och use()-hooken är React 19 enklare och snabbare än någonsin. Nästa steg är att bygga en riktig applikation — en todo-app, en väderwidget eller en dashboard — där du får öva på alla koncept i praktiken.
“React 19 med kompilatorn, Server Components och use()-hooken är den mest produktiva versionen av React hittills.”
- Simon Axelsson
Vanliga frågor
- Ska jag lära mig React eller Next.js 2026?
- Lär dig React först — det är grunden som allt bygger på. Next.js är ett ramverk ovanpå React som lägger till routing, SSR/SSG och serverkomponenter. Efter att du kan React grunderna är Next.js det naturliga nästa steget för de flesta webbapplikationer.
- Vad är React Compiler och behöver jag använda useMemo fortfarande?
- React Compiler (tidigare React Forget) är en kompilator som automatiskt memoizerar dina komponenter, hooks och värden. I React 19 är den tillgänglig men inte på som standard för alla — när den är aktiverad behöver du inte använda useMemo, useCallback eller React.memo manuellt. För 2026, använd React Compiler om möjligt och fall tillbaka på manuell memoization endast vid behov.
- Vad är skillnaden mellan Server Components och Client Components?
- Server Components renderas på servern och skickar bara HTML till klienten — de kan inte använda hooks eller interaktivitet. Client Components renderas i webbläsaren och har full tillgång till useState, useEffect och DOM-event. React 19 gör Server Components till standard i ramverk som Next.js.
- Vilket state management-bibliotek ska jag använda?
- För de flesta applikationer räcker Reacts inbyggda useState, useReducer och useContext. Om du behöver mer avancerat state management är Zustand och Jotai de mest populära valen 2026 — de är enkla, presterande och TypeScript-vänliga. Redux används fortfarande i stora företagsapplikationer men är mindre vanligt i nya projekt.
- Hur testar man React-komponenter?
- Standardverktyget 2026 är Vitest (snabbare än Jest) tillsammans med React Testing Library. För komponenttester använder du <code>render</code> och <code>screen</code> från Testing Library för att interagera med komponenter som en användare. För E2E-tester är Playwright (se separat guide) och Cypress de vanligaste valen.
Om författaren
Simon Axelsson är senior IT-konsult och grundare av SIAX Technology AB. Han hjälper nordiska företag med molninfrastruktur, dataplattformar och AI-automation.
Fler artiklar av Simon