60 domande di colloquio React con risposte brevi e precise e codice: basi, hooks, stato, rendering e prestazioni, pattern, Server Components e React 19, e test. Filtra per argomento e livello.
Queste 60 domande di colloquio React coprono ciò che i colloqui chiedono più spesso: JSX, props e stato, hooks come useState e useEffect, key, rendering e memo, context, error boundary, Server Components e le novità di React 19 come useActionState. Ognuna ha una risposta breve in parole semplici, molte con codice, e puoi filtrarle per argomento e livello.
Come sono suddivise le domande
Usa i filtri per esercitarti su un'area, apri una risposta solo dopo aver detto la tua ad alta voce e leggi gli esempi di codice come il tipo di cosa che un selezionatore potrebbe chiederti di scrivere sul momento.
Stato e props, hooks (soprattutto useEffect e il suo array di dipendenze), key nelle liste, re-render e memoizzazione, context e recupero dei dati. I ruoli senior aggiungono profilazione delle prestazioni, architettura e Server Components.
Sempre meno. Il codice nuovo usa function component e hooks. Aiuta comunque riconoscere i metodi del ciclo di vita quando leggi codice più vecchio, e gli error boundary si scrivono ancora come classi.
Costruisci piccole cose da zero: una todo list, una casella di ricerca con fetch in debounce, una modale con gestione del focus. Parla mentre scrivi codice e verifica i casi limite come liste vuote ed errori.
Sempre più spesso, almeno a livello di conoscerle: ref come prop, action con useActionState, useOptimistic, l'API use e i Server Components.
Poco sicuro sui re-render? Guardali contati dal vivo in
Una libreria JavaScript per costruire interfacce utente a partire da componenti. Descrivi come deve apparire lo schermo per i dati attuali, e React aggiorna la pagina quando i dati cambiano.
Una sintassi simile all'HTML dentro JavaScript. Un passaggio di build trasforma ogni tag in una chiamata di funzione che crea un elemento React, così puoi usare qualsiasi espressione JavaScript tra parentesi graffe.
Una funzione che riceve props e restituisce JSX. I nomi iniziano con la maiuscola così React li distingue dai tag HTML.
Gli input che un genitore passa a un componente figlio, come gli attributi di un tag HTML. Un componente non deve modificare le proprie props: ne riceve di nuove quando il genitore fa un re-render.
Le props arrivano dal genitore e sono di sola lettura dentro il componente. Lo stato appartiene al componente stesso e cambia nel tempo tramite il suo setter, che provoca un re-render.
Le key dicono a React quale elemento è quale tra un render e l'altro, così può mantenere lo stato e il nodo DOM giusti per ogni elemento quando la lista viene riordinata, filtrata o ampliata. Usa un id stabile preso dai tuoi dati, non l'indice dell'array quando l'ordine può cambiare.
Con JavaScript normale: un if prima del return, l'operatore ternario dentro JSX, oppure && per mostrare o non mostrare nulla. Attenzione a && con i numeri: 0 && <X /> mostra uno 0.
Un contenitore che raggruppa più elementi senza aggiungere un nodo DOM. Scrivi <>...</>, oppure <Fragment key={...}> quando il gruppo ha bisogno di una key in una lista.
Passa una funzione a una prop in camelCase come onClick. React passa un evento sintetico che si comporta come l'evento del browser. Passa la funzione stessa, non il risultato della sua chiamata.
La descrizione dell'interfaccia come semplici oggetti che React costruisce a ogni render. React confronta la nuova descrizione con la precedente e applica al DOM reale solo le differenze. Questo confronto si chiama riconciliazione.
Dà a un componente un pezzo di stato e una funzione per aggiornarlo. Chiamare il setter pianifica un re-render con il nuovo valore: la variabile nel render corrente non cambia.
Quando il valore successivo dipende da quello precedente, soprattutto con più aggiornamenti nello stesso evento. Ogni updater riceve l'ultimo valore in coda, mentre setCount(count + 1) chiamato due volte usa entrambe le volte lo stesso count obsoleto.
A sincronizzarsi con qualcosa esterno a React dopo il render: una sottoscrizione, un timer, un widget non React o una richiesta di rete. L'array di dipendenze dice quando rieseguirlo, e la funzione restituita fa il cleanup.
Per calcolare valori da props o stato (calcolali invece durante il render), o per reagire a un evento dell'utente (fai il lavoro nel gestore dell'evento). Gli effect servono a sincronizzarsi con sistemi esterni.
Chiama gli hooks solo al livello più alto di un componente o di un custom hook, mai dentro cicli, condizioni o funzioni annidate, e solo da funzioni React. React si basa sul fatto che l'ordine delle chiamate sia lo stesso a ogni render.
A conservare un valore che sopravvive ai render senza provocarne uno quando cambia, come un nodo DOM, l'id di un timer o un valore precedente. Lo leggi e lo scrivi tramite ref.current.
useMemo mette in cache il risultato di un calcolo; useCallback mette in cache una funzione. Entrambi restituiscono la stessa cosa finché una dipendenza non cambia, e contano soprattutto quando passi valori a figli memoizzati.
Un modo per leggere un valore fornito più in alto nell'albero senza passare props attraverso ogni livello. Ogni componente che legge un context fa un re-render quando il suo valore cambia.
Quando più valori cambiano insieme o lo stato successivo dipende da un tipo di azione, come in un form a più passaggi o in un carrello. Il reducer tiene tutte le transizioni in un'unica funzione testabile.
Una funzione il cui nome inizia con use e che chiama altri hooks. Condivide logica con stato tra componenti; ogni componente che lo chiama ottiene il proprio stato.
Viene eseguito dopo che React modifica il DOM ma prima che il browser disegni, così puoi misurare il layout e correggerlo senza uno sfarfallio visibile. Blocca il disegno, quindi usalo solo per questo.
A generare un id univoco che coincide tra rendering sul server e sul client, per collegare label, input e descrizioni. Non è pensato per le key delle liste.
Spostare lo stato condiviso nel genitore comune più vicino ai componenti che ne hanno bisogno, poi passarlo giù come props insieme alle funzioni per modificarlo.
React decide se fare un re-render confrontando il valore vecchio con quello nuovo. Modificare sul posto un oggetto o un array mantiene lo stesso riferimento, quindi React potrebbe saltare l'aggiornamento. Crea invece una nuova copia.
Un input controllato prende il valore dallo stato e segnala i cambiamenti tramite onChange. Un input non controllato tiene il proprio valore nel DOM, che leggi con un ref o all'invio del form.
Un valore che puoi calcolare da props o stato esistenti, come una lista filtrata. Salvarlo a parte significa tenere sincronizzate due copie; calcolarlo durante il render non può andare fuori sincrono.
Passare props attraverso componenti che non le usano solo per raggiungere un figlio in profondità. Le soluzioni sono la composizione (passare children), il context, o una libreria di stato per i dati davvero globali.
Quando molti componenti lontani leggono e aggiornano lo stesso stato client e il context provoca troppi re-render, o quando ti servono strumenti come devtools e middleware. I dati del server di solito si gestiscono meglio con una libreria di data fetching che li mette in cache.
In un framework con Server Components, recuperali sul server. Sul client, usa una libreria di dati o un effect che avvia la richiesta, gestisce caricamento ed errori e ignora il risultato se il componente è stato smontato o l'input è cambiato.
No. Gli aggiornamenti vengono messi in coda e raggruppati; da React 18 in poi vengono raggruppati anche quelli da timeout e promise, non solo dai gestori di eventi. Il nuovo valore compare nel render successivo.
Il suo stato cambia, il suo genitore fa un re-render, oppure cambia un context che legge. Un re-render non cambia sempre il DOM: React aggiorna solo ciò che è diverso.
Salta il re-render di un componente quando le sue props sono superficialmente uguali alla volta precedente. Conviene solo quando il componente fa spesso render con le stesse props e il suo render non è economico.
Un contenitore attivo solo in sviluppo che esegue controlli extra: fa il render dei componenti ed esegue gli effect due volte per far emergere effetti collaterali e cleanup mancanti. In produzione non fa nulla.
Registra l'interazione nel Profiler dei React DevTools su una build di produzione, cerca i componenti che fanno render spesso o impiegano molto, poi correggi la causa: sposta lo stato più in basso, memoizza o virtualizza le liste lunghe.
Un modo per segnare un aggiornamento come non urgente. React mantiene reattivo l'input e può interrompere il render lento, e isPending ti permette di mostrare che c'è un lavoro in corso.
Ti dà una copia di un valore che può restare indietro durante un rendering pesante. Digitando, l'input si aggiorna subito mentre la lista costosa fa il render con il valore differito.
Virtualizzala: mostra solo le righe visibili con una libreria come react-window o TanStack Virtual. Anche la paginazione o il caricamento progressivo allo scroll limitano il numero di nodi DOM.
Caricare parti dell'app solo quando servono. React.lazy con un import dinamico e un fallback di Suspense separa un componente in un file a sé.
Collegare React all'HTML generato sul server, così il markup esistente diventa interattivo senza essere ricostruito. Se il client mostra qualcosa di diverso, React segnala un hydration mismatch.
Uno strumento in fase di build che analizza i componenti e aggiunge automaticamente la memoizzazione, così gran parte di useMemo, useCallback e memo scritti a mano diventa superflua. Si aspetta codice che rispetti le regole di React.
Costruire componenti mettendone altri al loro interno, spesso tramite children o altre props. I componenti React condividono comportamento tramite composizione e hooks, e il team di React non ha trovato casi in cui le gerarchie di ereditarietà aiutino.
Tutto ciò che metti tra il tag di apertura e quello di chiusura di un componente. Permette a un componente di layout o contenitore di mostrare contenuti che non conosce.
Una funzione che riceve un componente e ne restituisce uno nuovo con comportamento aggiuntivo. I custom hook ne hanno sostituito la maggior parte degli usi, perché condividono logica senza avvolgere componenti e rinominare props.
Un componente che intercetta gli errori lanciati durante il render dei suoi figli e mostra un fallback invece di una pagina vuota. Si scrive ancora come classe con getDerivedStateFromError, oppure con una piccola libreria.
Mostrare i figli in un nodo DOM diverso, come document.body, con createPortal. Si usa per modali e tooltip che devono sfuggire all'overflow o al contesto di sovrapposizione di un genitore.
In React 19 i function component accettano ref come una normale prop. Nelle versioni precedenti, avvolgi il figlio in forwardRef. Usa useImperativeHandle per esporre solo alcuni metodi.
Un gruppo di componenti che lavorano insieme e condividono lo stato tramite context, come Tabs con Tabs.List e Tabs.Panel. L'utente dispone le parti mentre il genitore gestisce la logica.
Componenti che girano solo sul server e inviano al browser il risultato del render, non il loro codice. Possono leggere i dati direttamente; le parti interattive vanno nei Client Components marcati con "use client".
Segna un file come l'inizio del codice client: quel modulo e ciò che importa vengono inclusi nel bundle per il browser e possono usare stato, effect e gestori di eventi.
Funzioni asincrone che girano sul server ma possono essere chiamate dal client, il più delle volte come action di un form. Tratta ciascuna come un endpoint pubblico: valida l'input e controlla i permessi.
Avvolge una funzione action e restituisce il suo ultimo risultato, una action avvolta da passare a un form e un flag di attesa. È il modo di React 19 per mostrare il feedback di un form.
Un'API di React 19 che legge il valore di una promise o di un context durante il render. A differenza degli hooks può essere chiamata dentro condizioni; con una promise sospende finché il valore non è pronto.
Mostra subito il risultato atteso di un'azione, come un nuovo commento, mentre la richiesta è ancora in corso, poi si allinea al risultato reale quando arriva.
Un componente che mostra un fallback mentre qualcosa al suo interno non è pronto, come codice caricato in modo lazy o dati in un framework che lo supporta. Con il rendering sul server, permette ad alcune parti della pagina di arrivare in streaming più tardi.
Fanne il render con React Testing Library in un test runner come Vitest o Jest, interagisci come farebbe un utente (clic, digitazione) e verifica ciò che è visibile, non lo stato interno.
Query come getByRole("button", { name: "Save" }) trovano gli elementi come fanno le tecnologie assistive, così i test verificano anche che l'interfaccia sia accessibile e resistono ai cambi di markup.
La documentazione di React consiglia di partire da un framework come Next.js o React Router per le app complete. Per un'app solo client, Vite è uno strumento di build comune.
Usa elementi HTML semantici, dai una label a ogni input, gestisci il focus nelle finestre di dialogo, mantieni l'accesso da tastiera per tutto ciò che è cliccabile e testa con uno screen reader e un controllo automatico.
Servi HTML reale per ogni URL tramite rendering sul server, generazione statica o prerendering, dai a ogni route il proprio titolo e la propria meta description, ed elenca gli URL in una sitemap.
Key corrette nelle liste, effect con dipendenze complete e cleanup, nessuno stato che potrebbe essere derivato, markup accessibile, stati di errore e di caricamento, e nessun segreto nel codice client.
Tutte
Junior
Intermedio
Senior
Argomento
Livello
Cerca
effect, key, memo...
{shown} di {total} domande
Inizia gratis · Nessuna carta di credito richiesta