React

Ett JavaScript-bibliotek för att bygga användargränssnitt baserade på komponenter.

En lättviktig representation av det riktiga DOM i minnet, som används för att optimera uppdateringar.

En syntaxtillägg för JavaScript som gör det möjligt att skriva HTML-liknande kod i JS.

State är internt och hanteras inom komponenten; Props är externa och skickas från en förälder.

Funktionella komponenter är enkla JS-funktioner; klasskomponenter använder ES6-klasser och har livscykelmetoder.

Den hjälper React att identifiera vilka objekt som har ändrats, lagts till eller tagits bort för effektiv rendering.

En syntax (<>...</>) för att gruppera flera element utan att lägga till extra noder i DOM.

En funktion som tar emot en komponent och returnerar en ny komponent med ytterligare logik.

Algoritmen som React använder för att jämföra virtual DOM och tillämpa endast nödvändiga uppdateringar.

Ett verktyg för att lyfta fram potentiella problem i en applikation under utveckling.

Ett Element är ett vanligt objekt som beskriver ett UI; ett Component är funktionen/klassen som returnerar det.

Komponentbaserad arkitektur, stort ekosystem, SEO-vänligt (med SSR) och hög prestanda.

React uppmuntrar att använda komposition (nästlade komponenter) framför arv för att återanvända kod.

Den nuvarande reconciliation-motorn, utformad för att förbättra flödet och stödja inkrementell rendering.

Ett UI-bibliotek fokuserat på deklarativa vyer, återanvändning av komponenter och effektiv rendering via Virtual DOM.

De hjälper React att effektivt spåra elementens identitet.

Det bryter reconciliation-algoritmen när listans ordning förändras.

O(n) med heuristik som använder keys.

Funktioner som låter dig använda state och andra React-funktioner i funktionella komponenter.

Används för sidoeffekter som datahämtning, prenumerationer eller manuella DOM-manipulationer.

Deklarerar en state-variabel som React bevarar mellan re-renders.

useEffect körs efter att sidan ritats; useLayoutEffect körs synkront innan sidan ritats.

En hook som memoizar resultatet av en kostsam beräkning för att undvika onödig omberäkning.

En hook som memoizar en funktionsinstans för att förhindra att den återskapas vid varje render.

Skapar en beständig referens som inte utlöser en re-render när dess värde ändras.

Ger åtkomst till global data (som teman eller användare) utan manuell prop drilling.

Ett alternativ till useState för komplex tillståndslogik, liknande Redux-mönstret.

1. Anropa dem bara på toppnivån. 2. Anropa dem bara från React-funktioner eller custom hooks.

En JS-funktion som börjar med "use" och kan anropa andra hooks för att återanvända tillståndsfull logik.

En teknik för att automatiskt skicka en ref genom en komponent till ett barn.

En hook för att generera unika ID:n som är stabila mellan server och klient.

constructor, render, componentDidMount (Klass); useEffect med [] (Funktion).

componentWillUnmount (Klass); useEffect cleanup-funktion (Funktion).

En hook för att prenumerera på externa stores (t.ex. webbläsar-APIs) på ett sätt som är säkert för concurrent rendering.

En operation som påverkar något utanför scope för den funktion som körs (t.ex. API-anrop).

De tar bort komplexiteten med klasser och möjliggör återanvändning av logik via custom hooks.

Styr när effekter körs om baserat på ytlig jämförelse.

Ett alternativ till useState för komplex state-logik.

Använd useEffect med cleanup och abort controllers.

När ändringar inte ska trigga en re-render.

Använd React.memo, useMemo, useCallback, lazy loading och undvik anonyma funktioner i render.

En higher-order component som förhindrar att en funktionskomponent renderas om om props förblir desamma.

React schemalägger en uppdatering, slår ihop det nya tillståndet och triggar en omrendering av komponentträdet.

React upptäcker ändringar via referens; att mutera det ursprungliga objektet förhindrar att en omrendering triggas.

En komponent som returnerar samma utdata för samma props och state, och hoppar över onödiga renderingar.

Reacts förmåga att gruppera flera state-uppdateringar i en enda re-render för bättre prestanda.

State-ändringar, prop-ändringar eller context-uppdateringar.

Förlitar sig på referensändringar för att upptäcka uppdateringar.

Tillåter avbrytbar rendering för bättre UX.

Suspense hanterar asynkronitet på renderingsnivå.

Att flytta state till den närmaste gemensamma förfadern för att dela data mellan syskonkomponenter.

Kontrollerade komponenter hanterar formulärdata via state; okontrollerade använder DOM (via Refs).

Klasskomponenter som fångar JS-fel i sitt barnträd och visar ett reservgränssnitt.

Processen att skicka data genom flera nivåer av komponenter som inte behöver den.

Används för code-splitting för att ladda komponenter endast när de behövs.

React använder SyntheticEvents, som är cross-browser-omslag runt webbläsarens native-händelser.

Ett externt bibliotek för global tillståndshantering som följer ett enkelriktat dataflöde.

De ger ett sätt att rendera barn i en DOM-nod som finns utanför föräldrahierarkin.

Processen att koppla event listeners till server-renderad HTML för att göra den interaktiv.

En stilsättningsmetod där CSS skrivs med JS (t.ex. Styled Components) för lokal avgränsning.

Vanligtvis testas det med Jest (test runner) och React Testing Library (UI-fokuserad testning).

Context används för att skicka data; Redux är ett fullständigt state management-system med avancerade utvecklingsverktyg.

Server-Side Rendering: renderar appen till HTML på servern för snabbare initial laddning och SEO.

Ett sätt att skicka data utan prop drilling.

SSR förbättrar initial laddning/SEO; CSR flyttar arbetet till klienten.

Att ladda kod på begäran för att minska bundelstorlek.

Ett mönster med enkelriktat dataflöde.

Funktionsbaserade mappar, delade hooks, domänseparation.

Enhetstester isolerar logik; integrationstester verifierar interaktion.

React:s wrapper runt webbläsarens nativa händelser.

Kontrollerade inputs + valideringsbibliotek.

XSS-förebyggande via escapning, undvik dangerouslySetInnerHTML.

Escapar värden som standard.