Le 40 migliori domande e risposte per i colloqui su React JS (2026)
James Hartmann
Ti stai preparando per un colloquio su React JS? È tempo di scoprire cosa ti aspetta. Capire Domande per il colloquio su React JS aiuta a mettere in luce sia la chiarezza concettuale sia i punti di forza nell'implementazione nel mondo reale.
React JS offre immense opportunità di carriera per professionisti con esperienza tecnica e competenze specifiche. Che tu sia un neofita o un senior con 5 o 10 anni di esperienza professionale, le capacità di analisi e le competenze tecniche sono importanti. Queste domande e risposte aiutano team leader, manager e sviluppatori ad affinare le proprie competenze e a superare i colloqui più impegnativi.
Basata sulle opinioni di oltre 85 professionisti, tra cui responsabili delle assunzioni e responsabili tecnici, questa raccolta riflette le diverse aspettative del settore e i modelli di colloquio reali raccolti da team di lavoro in vari ambiti.
Le migliori domande e risposte per i colloqui su React JS
1) Spiega il Virtual DOM e come funziona la riconciliazione in React.
Risposta:
Il Virtual DOM è una rappresentazione in memoria dell'interfaccia utente che React gestisce per elaborare in modo efficiente le modifiche all'interfaccia utente. Quando lo stato o le proprietà mutano, React esegue il rendering di un nuovo albero del Virtual DOM, quindi esegue un differenziazione algoritmo rispetto all'albero precedente per scoprire l'insieme minimo di operazioni DOM reali richieste. Questo processo, chiamato riconciliazione, riduce al minimo il thrashing del layout e i costosi riflussi del browser. React assegna Tasti agli elementi negli elenchi per facilitare l'abbinamento dei nodi nei rendering e utilizza euristiche (come il confronto di tipi e chiavi) per decidere se aggiornare, riordinare o rimuovere i nodi. I vantaggi includono aggiornamenti prevedibili, una superficie di rilevamento dei bug più ridotta e prestazioni migliori nelle interfacce utente complesse.
Esempio:
Rendering di un elenco dinamico di messaggi di chat: utilizzando stable key valori (ID messaggio), solo i nuovi messaggi vengono aggiunti al DOM mentre i nodi esistenti rimangono intatti, evitando inutili rielaborazioni.
👉 Download gratuito del PDF: Domande e risposte per il colloquio su React JS
2) Quali sono i diversi tipi di cicli di vita dei componenti in React e come vengono mappati gli Hook?
Risposta:
I componenti React attraversano fasi di montaggio, aggiornamento e smontaggio. Nei componenti di classe, metodi del ciclo di vita come componentDidMount, shouldComponentUpdate, componentDidUpdatee componentWillUnmount governare gli effetti collaterali, le decisioni di rendering e la pulizia. Nei componenti di funzione, ganci fornire capacità equivalenti: useEffect gestisce gli effetti dopo il rendering; funzioni di pulizia all'interno useEffect eseguito allo smontaggio o prima dell'effetto successivo; useMemo e useCallback controllo della memorizzazione; e useRef Mantiene riferimenti mutabili tra i rendering. I vantaggi degli Hook includono la componibilità, minori problemi di binding "this" e un più facile riutilizzo della logica tramite hook personalizzati, mentre lo svantaggio principale è la necessità di apprendere le regole degli Hook e la gestione delle dipendenze.
Rispondi con degli esempi:
- Effetto di montaggio:
useEffect(() => fetchData(), []). - Pulizia durante lo smontaggio:
useEffect(() => { start(); return stop; }, []).
3) Come si sceglie tra rendering lato client (CSR), rendering lato server (SSR), generazione di siti statici (SSG) e rigenerazione statica incrementale (ISR) per un'applicazione React?
Risposta:
La strategia di rendering dovrebbe essere guidata dai requisiti dell'esperienza utente, dall'aggiornamento dei dati, dalle esigenze SEO, dai vincoli infrastrutturali e dalla velocità di sviluppo. CSR Adatto ad app altamente interattive dietro autenticazione in cui la SEO è secondaria. SSR fornisce la prima vernice con dati reali per le pagine pubbliche, migliorando il Time to First Byte e la SEO ma con costi server più elevati. SSG precalcola le pagine in fase di compilazione per garantire velocità e memorizzazione nella cache eccellenti quando i dati cambiano raramente. ISR Aggiorna le pagine statiche in modo incrementale su richiesta, offrendo un equilibrio tra freschezza e prestazioni. I fattori includono la memorizzazione nella cache, la personalizzazione, la latenza per un pubblico globale e la complessità operativa.
Tabella: Vantaggi vs Svantaggi
| Approccio | Vantaggi | Svantaggi |
|---|---|---|
| CSR | Hosting semplice, ricca interattività | Prima verniciatura più lenta, SEO più debole |
| SSR | Ottimo SEO, dati freschi al primo caricamento | Maggiore carico del server, complessità |
| SSG | Veloce, economico, compatibile con CDN | Contenuto obsoleto fino alla ricostruzione |
| ISR | Veloce con freschezza controllata | Più parti mobili da gestire |
4) Quale strategia di gestione dello stato dovrebbe essere utilizzata: stato locale, contesto, Redux o librerie di query?
Risposta:
Scegliere il strumento più semplice che gestisce le caratteristiche del problema. Stato locale del componente tramite useState or useReducer è ideale per problemi isolati di interfaccia utente. Contesto funziona per valori prevalentemente di lettura e a livello di applicazione (tema, impostazioni locali, utente corrente), ma non è ottimizzato per aggiornamenti ad alta frequenza su alberi di grandi dimensioni. Redux o simili archivi basati su eventi sono eccellenti quando sono necessarie prevedibilità, debugging con viaggi nel tempo, middleware e flussi di dati unidirezionali rigorosi. Librerie di recupero dati (ad esempio, modelli in stile React Query) gestiscono i cicli di vita dello stato del server (caching, deduplicazione, strategie di refetching e sincronizzazione), riducendo il boilerplate. Un'architettura pragmatica utilizza spesso stato locale + contesto per la configurazione + una libreria di stato del server, riservando Redux ai flussi di lavoro complessi.
Esempio:
Una dashboard utilizza React Query per la memorizzazione nella cache dell'API, Context per il tema e useReducer all'interno di widget complessi per la gestione degli eventi locali.
5) Qual è la differenza tra useEffect e useLayoutEffect e quando si applica l'uno o l'altro?
Risposta:
useEffect viene eseguito dopo che il browser ha completato la colorazione, rendendolo adatto ad attività non bloccanti come il recupero dei dati, le sottoscrizioni e la registrazione. useLayoutEffect esegue in modo sincrono dopo le mutazioni DOM ma prima della vernice, consentendo regolazioni di misurazione e layout che devono avvenire senza sfarfallio (ad esempio, lettura delle dimensioni degli elementi e riapplicazione sincrona degli stili). Lo svantaggio di useLayoutEffect è che può bloccare la verniciatura e danneggiare la reattività se usato eccessivamente. Una buona regola è iniziare con useEffect per gli effetti collaterali e raggiungere useLayoutEffect solo quando è necessario misurare o modificare in modo sincrono il layout per garantire la correttezza visiva.
Rispondi con degli esempi:
useEffect: recupera il profilo utente dopo il rendering.useLayoutEffect: misura la dimensione di un suggerimento per posizionarlo prima di dipingerlo.
Confronto veloce
| Caratteristica | useEffect | usaEffettoLayout |
|---|---|---|
| Sincronizzazione | Dopo la verniciatura | Prima della vernice |
| Caso d'uso | Dati, abbonamenti | Misurazioni, correzioni del layout sincrono |
| Rischio | Lieve colpo se pesante | Blocca la vernice se pesante |
6) Spiega come funzionano le chiavi negli elenchi e le insidie nell'utilizzo degli indici degli array.
Risposta:
Le chiavi consentono alla riconciliazione di React di identificare accuratamente gli elementi dell'elenco tra i rendering. Chiavi stabili e univoche consentono a React di riordinare, inserire o rimuovere elementi con un churn del DOM minimo. Utilizzando indici di array come chiavi è problematico quando gli elementi possono essere riordinati, inseriti o eliminati, perché React potrebbe associare lo stato precedente all'elemento sbagliato, causando bug impercettibili (ad esempio, valori di input o animazioni errati). La procedura migliore è utilizzare un identificatore immutabile e specifico del dominio, come un ID di database. Se l'elenco è realmente statico e non viene mai riordinato, gli indici sono accettabili, ma questa è l'eccezione piuttosto che la regola.
Esempio:
Una bacheca Kanban trascinabile dovrebbe utilizzare gli ID delle schede, non gli indici, per preservare l'identità dei componenti durante il trascinamento.
7) Dove si applicano le tecniche di memorizzazione in React e quali sono i loro vantaggi e svantaggi?
Risposta:
La memorizzazione riduce i calcoli e i rendering non necessari riutilizzando i risultati precedenti quando gli input non sono cambiati. In React, React.memo memorizza nella cache l'output del componente, useMemo memorizza nella cache calcoli costosi e useCallback Memorizza le identità delle funzioni passate ai figli. I principali vantaggi sono la stabilità delle prestazioni e il ridotto utilizzo della CPU in caso di interazioni intense. Gli svantaggi includono complessità, potenziali bug nella cache obsoleta se le dipendenze sono errate e sovraccarico di memoria.
Tabella: Diversi modi per memorizzare
| Tipo | Missione | Fattori tipici da considerare |
|---|---|---|
React.memo(Component) |
Salta il rendering se gli oggetti di scena sono poco profondi | Volatilità del prop, costo del figlio |
useMemo(fn, deps) |
Valori calcolati nella cache | Costo di elaborazione rispetto alla memoria |
useCallback(fn, deps) |
Identità di funzione stabile | Correttezza della dipendenza |
Rispondi con degli esempi:
Memorizza un set di dati filtrato e ordinato per una griglia utilizzando useMemoe avvolgere i componenti del renderer delle celle con React.memo per evitare tempeste di nuovo intonaco.
8) Preferisci componenti controllati o non controllati per i moduli? Discuti vantaggi, svantaggi e tipi di stato del modulo.
Risposta:
Componenti controllati associa gli input allo stato di React tramite value e onChange, consentendo la convalida, il mascheramento e l'interfaccia utente condizionale derivata da un'unica fonte di verità. I vantaggi sono la prevedibilità e la facile integrazione con altri stati; gli svantaggi includono il costo di ri-rendering per ogni pressione di tasto senza ottimizzazione. Componenti non controllati Si affidano al DOM come fonte di verità utilizzando i riferimenti, offrendo un overhead inferiore e un cablaggio più semplice per i moduli di base, ma una convalida meno centralizzata. Per flussi di lavoro complessi, è comune un modello ibrido, che utilizza input controllati per i campi critici e non controllati per aree di grandi dimensioni e ricche di testo.
Esempio:
Un modulo di registrazione utilizza campi controllati per la convalida di e-mail e password, mentre un'area di testo per le note non è controllata per ridurre il sovraccarico di rendering.
9) Quando si usa Context anziché un hook personalizzato e qual è la differenza concettualmente tra i due?
Risposta:
Contesto è un meccanismo di trasporto per i valori di cui molti componenti hanno bisogno, evitando il drill-down delle prop. Non gestisce lo stato da solo; lo espone semplicemente ai discendenti. A gancio personalizzato Incapsula una logica riutilizzabile, che combina stato, effetti e servizi esterni, restituendo valori e funzioni. Utilizza Context per fornire una configurazione condivisa, prevalentemente in lettura, o per esporre uno store, e utilizza hook personalizzati per implementare il comportamento dello store o per orchestrare aspetti come l'autenticazione, i flag delle funzionalità o le policy di recupero dei dati. I due sono complementari: un pattern comune è useAuth() come un gancio personalizzato supportato da un AuthContext.
Rispondi con degli esempi:
AuthProvider fornisce utenti e token tramite Context; useAuth gestisce gli effetti collaterali di accesso, aggiornamento e disconnessione.
10) Puoi delineare strategie di ottimizzazione delle prestazioni per grandi applicazioni React, incluse le caratteristiche dei rendering lenti e degli hotspot del ciclo di vita?
Risposta:
L'ottimizzazione delle prestazioni inizia con la misurazione. Identifica i percorsi lenti utilizzando il Profiler di React DevTools e i pannelli delle prestazioni del browser per individuare i punti critici di riconciliazione e i commit costosi. Le tattiche includono località statale (mantenere lo stato vicino ai suoi consumatori), memoizzazione (React.memo, useMemo, useCallback), virtualizzazione degli elenchi per lunghe liste, divisione del codice con caricamento lento per ridurre il bundle iniziale e debouncing o throttling eventi ad alta frequenza. Per i dati supportati dal server, adottare la memorizzazione nella cache con una libreria di query e sfruttare adatto alla suspense Modelli per un caricamento più fluido. Prestare attenzione ai punti critici del ciclo di vita, come effetti che vengono eseguiti troppo spesso a causa di array di dipendenze estesi o componenti che vengono nuovamente renderizzati a causa di valori di contesto che cambiano frequentemente.
Rispondi con degli esempi:
Virtualizzare una tabella da 10,000 righe utilizzando una libreria di finestre; caricare in modo differito grafici pesanti dietro la suddivisione del codice basata su percorsi per migliorare la visualizzazione iniziale.
11) Qual è la differenza tra props e state in React?
Risposta:
Entrambi props e state influenzano il modo in cui i componenti vengono renderizzati, ma il loro scopo e ciclo di vita differiscono fondamentalmente. Puntelli (abbreviazione di proprietà) sono input immutabili passati da un componente padre a un componente figlio, che definiscono la configurazione o i dati per il rendering. Fluiscono verso il basso nel flusso di dati unidirezionale di React e non dovrebbe mai essere modificato dal componente ricevente. Regione / Stato, d'altra parte, è modificabile e gestito internamente dal componente. Determina un comportamento dinamico che cambia nel tempo, come i valori di input del modulo o la visibilità attivata/disattivata.
Tabella delle differenze principali:
| Fattore | Puntelli | Regione / Stato |
|---|---|---|
| Mutabilità | Immutabile | Mutevole |
| Proprietà | Trasmesso dal genitore | Di proprietà del componente |
| Metodo di aggiornamento | Re-rendering dei genitori | useState or setState |
| Usa caso | Configurazione | Modifiche dinamiche dell'interfaccia utente |
| Ciclo di vita | Esiste durante il rendering | Persiste, attiva nuovi rendering |
Esempio:
A <Button color="blue" /> usa oggetti di scena per decidere il colore, mentre un clicked booleano nel suo stato attiva/disattiva il feedback visivo.
12) Spiega il modello di architettura dei componenti in React e i diversi modi in cui vengono classificati i componenti.
Risposta:
Le applicazioni React seguono una architettura basata sui componenti, suddividendo l'interfaccia utente in piccoli blocchi riutilizzabili. I componenti possono essere categorizzati in base al loro scopo e responsabilità:
- Componenti presentazionali (stupidi) – Concentrarsi sull'interfaccia utente, ricevere dati tramite oggetti di scena e raramente gestire lo stato.
- Componenti del contenitore (intelligenti) – Gestiscono la logica, recuperano i dati e gestiscono lo stato; eseguono il rendering dei componenti presentazionali.
- Componenti di ordine superiore (HOC) – Funzioni che prendono un componente e restituiscono una versione migliorata con un comportamento aggiuntivo.
- Componenti puri – Ottimizza le prestazioni confrontando superficialmente props e state.
- Componenti funzionali vs componenti di classe – I componenti funzionali (con hook) sono ora preferiti per leggibilità e prestazioni.
Esempio:
A <UserProfile /> il componente può essere presentativo, ricevendo informazioni sull'utente, mentre <UserProfileContainer /> recupera i dati e ne gestisce il ciclo di vita.
13) Come gestisce React i limiti di errore e perché sono importanti?
Risposta:
Limiti di errore sono componenti React speciali che catturano JavaErrori di script in qualsiasi punto dell'albero dei componenti figlio durante il rendering, i metodi del ciclo di vita o i costruttori. Prevengono arresti anomali dell'intera app isolando gli errori in sottoalberi specifici. È possibile implementarne uno utilizzando componentDidCatch(error, info) e static getDerivedStateFromError() in un componente di classe.
vantaggi:
- Mantieni la stabilità dell'interfaccia utente mostrando le interfacce utente di fallback.
- Acquisisci e registra gli errori per l'analisi.
- Impedire smontaggi a cascata.
Esempio:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
14) Cosa sono i React Fragments e in che modo differiscono dai wrapper elementi?
Risposta:
Reagire Frammenti (<></>) consentono di raggruppare più elementi senza aggiungere nodi extra al DOM. Questo è essenziale per una struttura più pulita, soprattutto in elenchi, tabelle e HTML semantico, dove wrapper aggiuntivi potrebbero causare problemi di layout o accessibilità. A differenza dei wrapper <div>s, i frammenti non vengono renderizzati nel DOM e quindi presentano vantaggi in termini di prestazioni e semantica.
Esempio:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
Tabella delle differenze:
| Fattore | Frammento | <div> Involucro |
|---|---|---|
| Uscita DOM | Nona | Aggiunge un nodo extra |
| Usa caso | Raggruppamento strutturale | Stile o layout |
| Cookie di prestazione | Meglio | Leggero sovraccarico |
15) Quale React Hook useresti per ottimizzare le prestazioni e perché?
Risposta:
I componenti React sensibili alle prestazioni spesso si basano su ganci di memorizzazione e caricamento lento per ridurre al minimo il lavoro ridondante. Tra gli hook più comuni troviamo:
useMemo→ Memorizza nella cache i risultati computazionalmente costosi.useCallback→ Impedisce rendering figlio non necessari dovuti a modifiche dell'identità della funzione.useTransition→ Rinvia gli aggiornamenti non urgenti per un'interfaccia utente più fluida.useDeferredValue→ Ritarda i calcoli più pesanti fino a dopo le interazioni immediate.
Esempio:
Una grande griglia di dati che utilizza useMemo per risultati filtrati può ridurre il consumo di CPU del 50% o più.
vantaggi:
- Riduce i rendering sprecati.
- Mantiene l'interfaccia utente reattiva sotto carico.
Svantaggio:
- Richiede precisione delle dipendenze; se gestita in modo errato, potrebbero verificarsi bug nella cache obsoleta.
16) Cosa sono i React Portal e quali sono i loro vantaggi?
Risposta:
Portali consentire ai componenti React di eseguire il rendering dei figli in un nodo DOM al di fuori della gerarchia padre, in genere per modali, tooltip o menu a discesa che devono "sfuggire" visivamente ai contesti di overflow o di impilamento. Implementato utilizzando ReactDOM.createPortal(child, container), mantengono la coerenza del bubbling degli eventi, quindi i gestori degli eventi funzionano come se l'elemento fosse rimasto all'interno della sua gerarchia originale.
Tabella dei vantaggi:
| Vantaggio | Descrizione |
|---|---|
| Indipendenza strutturale | Rendering esterno all'albero padre |
| Controllo CSS/Stacking | Evitare overflow: hidden o problemi di indice z |
| Propagazione dell'evento | Gli eventi sintetici di React continuano a essere visualizzati correttamente |
| riutilizzabilità | Ideale per sovrapposizioni globali |
Esempio:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) Spiega come React Router gestisce la navigazione e lo stato tra le pagine.
Risposta:
React Router è una libreria di routing dichiarativa che sincronizza l'interfaccia utente con l'URL del browser. Utilizza API della cronologia per manipolare la cronologia della sessione senza ricaricare l'intera pagina. I concetti chiave includono Itinerari, Link e Collegamentie Outlet per il routing annidato. La libreria supporta percorsi dinamici, Parametri URLe ganci di navigazione (useNavigate, useParams, useLocation). React Router v6 ha introdotto una sintassi semplificata e API di dati per caricatore e azione funzioni, migliorando l'integrazione SSR e la gestione dello Stato.
Esempio:
<Route path="/user/:id" element={<UserProfile />} />
Vantaggi:
- Abilita la navigazione su una sola pagina.
- Mantiene la posizione di scorrimento e la cronologia.
- Si integra perfettamente con il caricamento differito per prestazioni migliori.
18) Quali sono i diversi modi per gestire gli effetti collaterali nelle applicazioni React?
Risposta:
Gli effetti collaterali si riferiscono ad azioni che incidono su qualcosa al di fuori dell'ambito di un componente (chiamate API, manipolazione del DOM, sottoscrizioni). Gli strumenti principali includono:
useEffectper gli effetti lato client dopo il rendering.- Gestori di eventi per effetti guidati dall'utente.
- Ganci personalizzati per riutilizzare la logica degli effetti (ad esempio,
useFetch). - middleware (come Redux Saga o Thunk) per l'orchestrazione asincrona complessa.
- React Query o SWR per gestire automaticamente lo stato del server e i cicli di recupero.
Esempio:
A useEffect recupera i dati una volta al montaggio:
useEffect(() => { fetchData(); }, []);
vantaggi:
Gestione asincrona semplificata, migliore incapsulamento e controllo più chiaro del ciclo di vita.
19) React è un framework o una libreria? Discuti i fattori che definiscono la differenza.
Risposta:
React è ufficialmente un libreria, non un quadro completo. Si concentra esclusivamente sul visualizza livello, fornendo rendering, stato e astrazioni dei componenti senza imporre routing, recupero dei dati o struttura di build.
Tavola di comparazione:
| Fattore | Libreria (React) | Framework (Angular, Vue) |
|---|---|---|
| Obbiettivo | Visualizza il rendering | Architettura MVC completa |
| Supponente | Basso | Alta |
| Controllate | Guidato dallo sviluppatore | Basato sul framework |
| Flessibilità | Alta | Limitato dalle convenzioni |
| Curva di apprendimento | Adeguata | Maggiore a causa della complessità |
L'ecosistema di React (Redux, Router, Query, Next.js) forma di fatto un "meta-framework", offrendo una componibilità modulare che consente agli sviluppatori di creare la propria architettura.
20) Quando dovresti usare React.lazy e Suspense e quali sono i loro vantaggi?
Risposta:
React.lazy al divisione del codice caricando dinamicamente i componenti solo quando necessario, mentre Suspense Fornisce un'interfaccia utente di fallback finché il componente non è pronto. Questa combinazione migliora le prestazioni di caricamento iniziale e la reattività percepita dall'utente.
Esempio:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
Tabella dei vantaggi:
| Vantaggio | Spiegazione |
|---|---|
| Cookie di prestazione | Carica il codice su richiesta |
| Esperienza da Utente | Caricamento graduale fallback |
| Dimensioni del pacco | Pacchetto iniziale più piccolo |
| Semplicità | API React nativa, configurazione minima |
migliori pratiche:
- Avvolgi più componenti lazy in un unico confine Suspense.
- Utilizzare indicatori di fallback significativi per l'accessibilità.
21) Spiega cosa sono i React Server Components (RSC) e i loro vantaggi.
Risposta:
I componenti React Server (RSC) sono un'importante innovazione introdotta per migliorare le prestazioni e l'esperienza degli sviluppatori consentendo ai componenti di renderizzare sul server senza inviare i loro JavaScript per il clientVengono eseguiti interamente sul server, recuperando dati, leggendo da database o eseguendo operazioni di I/O in modo sicuro prima di trasmettere l'output serializzato al client.
vantaggi:
- Dimensioni del pacchetto più piccole — Nessun client JS per la logica solo server.
- Prestazione migliorata — Il recupero dei dati lato server riduce le cascate.
- Sicurezza — Il codice sensibile non raggiunge mai il browser.
- Migliore memorizzazione nella cache — I componenti del server sono memorizzabili nella cache sul bordo.
Esempio:
A <ProductList /> il componente server può recuperare i dati direttamente da un database e passare i risultati a un <ProductCard /> componente client.
22) Qual è la differenza tra l'idratazione e la riconciliazione di React?
Risposta:
Sebbene entrambi i termini implichino l'aggiornamento dell'interfaccia utente da parte di React, il loro scopo è diverso:
- Riconciliazione è il processo di confronto dell'albero DOM virtuale con la sua versione precedente per determinare il set minimo di aggiornamenti DOM.
- Idratazione, d'altra parte, è il processo di collegamento degli ascoltatori di eventi e delle strutture interne di React a HTML renderizzato dal server sul lato client, trasformando il markup statico in un'app completamente interattiva.
Tavola di comparazione:
| Fattore | Riconciliazione | Idratazione |
|---|---|---|
| grilletto | Re-rendering del cliente | Caricamento iniziale della pagina (SSR) |
| Missione | Aggiornare il DOM in modo efficiente | Rendi interattivo l'HTML SSR |
| Obbiettivo | Differenza DOM virtuale | Associazione di eventi + ricollegamento dello stato |
| Frequenza | Più volte | Una volta dopo il rendering SSR |
Esempio:
Dopo che un'app Next.js invia HTML pre-renderizzato, React idrati in modo che i componenti rispondano agli eventi senza dover rielaborare tutto.
23) In che modo il rendering simultaneo migliora l'esperienza utente in React 18+?
Risposta:
Il rendering simultaneo consente a React di interrompere, mettere in pausa o riprendere il rendering in base alla priorità dell'utente. Questo impedisce all'interfaccia utente di bloccarsi durante calcoli pesanti o nuovi rendering. Funzionalità come useTransition e useDeferredValue sfruttare questa capacità per separare aggiornamenti urgenti (come digitare) da non urgente quelli (come il filtraggio).
Vantaggi:
- Interazioni fluide e reattive.
- Suddivisione temporale per evitare il blocco del thread principale.
- Priorità prevedibile per una migliore UX.
Esempio:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
In questo caso, la digitazione rimane fluida anche quando si filtrano grandi set di dati, perché React pianifica contemporaneamente gli aggiornamenti non urgenti.
24) Quali sono i diversi modi per eseguire i test nelle applicazioni React?
Risposta:
I test React possono essere classificati in unità, integrazionee da un capo all'altro livelli.
Tabella dei metodi di prova:
| Tipo | Chiavetta | Missione |
|---|---|---|
| Unità | Scherzare | Testare funzioni/componenti isolati |
| Integrazione: | Libreria di test di React | Testare le interazioni dell'interfaccia utente e le modifiche di stato |
| E2E | Cypress / Drammaturgo | Testare i flussi utente nei browser reali |
migliori pratiche:
- Preferire Libreria di test di React su Enzyme (moderno, orientato al DOM).
- API fittizie utilizzando
msw(Finta assistente sociale). - Evita di testare i dettagli dell'implementazione: concentrati sul comportamento.
Esempio:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) Quali strumenti di compilazione e bundler sono più comunemente utilizzati con React e quali sono le loro differenze?
Risposta:
React può integrarsi con diversi bundler e compilatori, ognuno ottimizzato per diversi casi d'uso.
Tavola di comparazione:
| Chiavetta | Caratteristiche | Vantaggi | Svantaggi |
|---|---|---|---|
| Webpack | Altamente configurabile | Maturo, ricco di plugin | Configurazione complessa |
| rapidamente | Server di sviluppo velocissimo basato su ESM | HMR istantaneo, sintassi moderna | Supporto limitato per i plugin legacy |
| pacco | Configurazione zero | Ottimizzazione automatica | Less flessibile |
| costruire | Compilatore basato su Go | Estremamente veloce | Meno plugin dell'ecosistema |
Esempio:
I progetti moderni spesso adottano rapidamente per la velocità di sviluppo e costruire nelle pipeline CI/CD per build di produzione efficienti.
26) In che modo Next.js estende le capacità di React?
Risposta:
Next.js è un Framework React Fornisce un'architettura personalizzata per routing, SSR e generazione statica. Introduce modelli di rendering ibridi, percorsi API e funzionalità di distribuzione edge-ready.
vantaggi:
- Built-in SSR/SSG/ISR supporto.
- Router per applicazioni con i componenti del server React.
- Ottimizzazione dell'immagine e middleware per prestazioni e sicurezza.
- Percorsi API semplici per funzioni senza server.
Esempio:
app/page.js per le pagine renderizzate SSR; app/api/route.js per gli endpoint del server.
In sintesiNext.js consente di realizzare app React di livello produttivo con una configurazione minima.
27) Quali sono alcuni degli errori più comuni nelle prestazioni di React e come è possibile evitarli?
Risposta:
Le insidie più comuni nelle prestazioni di React includono:
- Re-rendering non necessari — Correggi l'utilizzo
React.memoo componenti divisibili. - Creazione di oggetti/array in linea - Utilizzo
useMemoper riferimenti stabili. - Grandi liste — Implementare la finestratura (
react-window,react-virtualized). - Calcoli pesanti — Memorizzare o delegare ai web worker.
- Uso eccessivo del contesto — Gli aggiornamenti frequenti si propagano in profondità; preferiscono lo stato derivato.
Esempio:
Se passi { a: 1 } in linea con un componente memorizzato, viene rieseguito a ogni rendering padre. Risolvi memorizzando l'oggetto.
Tabella dei suggerimenti sulle prestazioni:
| Problema | Tecnica di ottimizzazione |
|---|---|
| Re-rendering | React.memo, useCallback |
| Calcoli costosi | useMemo, Lavoratori del Web |
| Grandi set di dati | Virtualization |
| Aggiornamenti frequenti del contesto | Localizza lo stato |
28) Spiega la differenza tra useReducer e useState.
Risposta:
Entrambi gli hook gestiscono lo stato, ma differiscono in complessità e controllo.
useStateè ideale per transizioni di stato semplici e isolate.useReducercentralizza la logica di stato complessa in un funzione riduttrice, utilizzandodispatchazioni per aggiornamenti prevedibili.
Tavola di comparazione:
| Fattore | useState | useReducer |
|---|---|---|
| Sintassi | [value, setValue] |
[state, dispatch] |
| Complessità | Semplice | Da moderato a complesso |
| Usa caso | Stati indipendenti | Stati correlati o annidati |
| Debug | Less verboso | Più semplice tramite azioni registrate |
| Esempio | Attiva/disattiva il modulo | Convalida del modulo o moduli multi-step |
Esempio:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) Come si può migliorare l'accessibilità (a11y) nelle applicazioni React?
Risposta:
L'accessibilità garantisce che tutti gli utenti, compresi quelli con disabilità, possano utilizzare la tua app in modo efficace. React facilita l'accessibilità attraverso il markup semantico e gli attributi ARIA.
migliori pratiche:
- Usa il HTML semantico (
<button>vs<div onClick>). - Gestisci la messa a fuoco utilizzando
refetabIndex. - Utilizzare i ruoli ARIA per i componenti dinamici.
- Assicurare il contrasto dei colori e le alternative di testo per le immagini.
- Sfrutta strumenti come eslint-plugin-jsx-a11y e asse-nucleo per le revisioni contabili.
Esempio:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
vantaggi:
- Raggiungimento di un pubblico più ampio.
- Miglioramento SEO.
- Conformità agli standard WCAG.
30) Puoi descrivere in che modo la suddivisione del codice e il caricamento differiscono e quando utilizzare ciascuno di essi?
Risposta:
Entrambe le tecniche ottimizzano le dimensioni del bundle e le prestazioni di carico, ma differiscono in tempi di esecuzione.
- Suddivisione del codice divide i pacchi più grandi in pezzi più piccoli che possono essere caricati in modo indipendente.
- Caricamento lento ritarda il caricamento di quei blocchi finché non sono necessari.
Tavola di comparazione:
| Fattore | Suddivisione del codice | pigro Caricamento |
|---|---|---|
| Definizione | Divide il codice in blocchi | Carica blocchi su richiesta |
| Chiavetta | Webpack, Vite | React.lazydinamico import() |
| Missione | Ottimizza le dimensioni del bundle | Migliorare le prestazioni di runtime |
| Tempo di costruzione | Runtime |
Esempio:
const Settings = React.lazy(() => import('./Settings'));
Utilizzate insieme, queste tecniche riducono il tempo di interazione e migliorano la velocità percepita delle app di grandi dimensioni.
31) Spiega il concetto di Render Props e in che modo differisce dai componenti di ordine superiore (HOC).
Risposta:
Render Props è un pattern in React in cui un componente accetta un funzionare come un oggetto di scena che indica cosa visualizzare. Ciò consente di condividere la logica dei componenti tra più componenti senza duplicazioni.
Gli HOC, d'altra parte, avvolgere un componente e restituire una versione migliorata con prop o comportamenti iniettati.
Tavola di comparazione:
| Fattore | Render Props | HOC |
|---|---|---|
| Implementazione/Attuazione | Funzione come bambino | Componente di avvolgimento della funzione |
| Composizione | Controllo in linea | Wrapping dichiarativo |
| leggibilità | Spesso più chiaro | Può causare l'inferno dell'involucro |
| Usa caso | Logica di rendering dinamico | Preoccupazioni trasversali |
Esempio:
<DataProvider render={data => <UserList users={data} />} />
I Render Props offrono maggiore flessibilità ed evitano le collisioni di nomi comuni negli HOC.
32) Quali sono i diversi tipi di ganci personalizzati e i loro vantaggi?
Risposta:
Gli hook personalizzati incapsulano una logica riutilizzabile che combina stato, effetti collaterali e utilità. Migliorano la riutilizzabilità del codice, la separazione delle attività e la testabilità.
Tipi ed esempi:
- Ganci di gestione statale -
useToggle,useForm. - Ganci di recupero dati -
useFetch,useQuery. - Ganci UI/UX -
useWindowSize,useDarkMode. - Ganci di integrazione -
useLocalStorage,useMediaQuery. - Ganci di performance -
useDebounce,useThrottle.
vantaggi:
- Riutilizzo logico centralizzato.
- Componenti più puliti.
- Test indipendenti.
Esempio:
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
return [value, setValue];
}
33) Come si gestiscono le perdite di memoria nelle applicazioni React?
Risposta:
Le perdite di memoria si verificano quando i componenti non montati contengono ancora riferimenti a risorse o sottoscrizioni. Degradano le prestazioni e causano comportamenti imprevedibili.
Tecniche di prevenzione:
- Effetti di pulizia in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - Interrompere le chiamate asincrone utilizzando
AbortController. - Evitare di conservare chiusure stantie facendo riferimento a vecchi oggetti di scena/stati.
- Annulla l'iscrizione agli eventi o ai socket durante lo smontaggio.
- Utilizzare React Profiler per rilevare una crescita lenta della memoria.
Esempio:
In un'app di chat, disconnettere sempre gli ascoltatori del socket quando un utente esce dalla chat room.
34) Quali sono le best practice per la gestione dei form nelle grandi applicazioni React?
Risposta:
La gestione dei moduli nelle app React su scala aziendale richiede un equilibrio tra controllo, prestazioni e manutenibilità.
migliori pratiche:
- Utilizzare librerie come Formik, Reagire forma gancio, o Forma finale per la convalida e la registrazione sul campo.
- Raggruppa i campi correlati utilizzando componenti o contesti annidati.
- APPLICA convalida dello schema (Sì, Zod) per coerenza.
- Annullare le convalide pesanti o i controlli API.
- Mantenere lo stato del modulo localizzato, a meno che non sia necessario a livello globale.
Esempio:
React Hook Form riduce al minimo i rendering isolando lo stato di input.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) Quali sono i design pattern più utili nello sviluppo React e quali sono le loro caratteristiche?
Risposta:
React si presta naturalmente a diversi modelli di progettazione software per un'architettura dell'interfaccia utente scalabile e gestibile.
| Cartamodello | Descrizione | Esempio |
|---|---|---|
| Contenitore-Presentatore | Separare la logica (contenitore) dall'interfaccia utente (presentatore) | Contenitore dati → Componente interfaccia utente |
| Controllato-Non controllato | Gestire i dati del modulo tramite stato vs DOM | Formik vs input grezzi |
| Componenti composti | Il genitore controlla la composizione del figlio | <Tabs><Tab /></Tabs> |
| Modello del fornitore | Condividi lo stato tramite contesto | Fornitore di temi |
| Modello di ganci | Riutilizzare la logica con stato | useAuth, useFetch |
Esempio:
A Tabs il componente espone il contesto in modo <Tab> i bambini si registrano automaticamente — un'applicazione pulita del Componente composto pattern.
36) Quali sono le principali differenze tra React 18 e React 19?
Risposta:
React 19 si basa sulle fondamenta simultanee di React 18, aggiungendo nuove funzionalità significative.
| caratteristica | Reagisci 18 | Reagisci 19 |
|---|---|---|
| Rendering simultaneo | Introdotto | Migliorato con una migliore suspense |
| Componenti del server | Sperimentale | Stabilizzato e integrato |
| API delle azioni | Non disponibile | Nuovo standard per la gestione delle azioni dei moduli |
| Caricamento delle risorse | Manuale | Caricamento automatico delle risorse |
| Gestione degli errori migliorata | Basic | Granulare con ganci di confine |
Vantaggi principali:
React 19 si concentra su mutazioni di dati più semplici, azioni di modulo integratee controllo asincrono migliorato, rendendo l'SSR e l'idratazione progressiva più fluide.
37) Come funziona Micro-Frontend Architecture si integra con React e quali sono i suoi vantaggi?
Risposta:
I micro-frontend suddividono una grande applicazione web in moduli front-end indipendenti e distribuibili. In un ecosistema React, ogni micro-front-end è un'applicazione autonoma che può essere integrata tramite Federazione dei moduli, iframe, o caricatori di runtime personalizzati.
vantaggi:
- Distribuzione e scalabilità indipendenti.
- Autonomia del team tra stack tecnologici.
- Pipeline di compilazione più veloci.
Esempio:
utilizzando Federazione del modulo Webpack, i team possono esporre i componenti React in modo dinamico su più app:
exposes: { './NavBar': './src/NavBar' }
svantaggi:
- Complessità della gestione dello stato condiviso.
- Sovraccarico di prestazioni dovuto a bundle isolati.
38) Quali sono i fattori che prendi in considerazione per scalare un'applicazione React in produzione?
Risposta:
La scalabilità delle applicazioni React implica considerazioni tecniche, architettoniche e operative.
Fattori chiave:
- Struttura del codice — adottare monorepo (Nx/Turborepo) per la condivisione modulare del codice.
- gestione dello stato — stati del segmento locale vs globale vs server.
- Cookie di prestazione — caricamento differito, memorizzazione, memorizzazione nella cache CDN.
- Controllo — utilizzare Sentry, Datadog o LogRocket per errori e metriche.
- Test e CI/CD — pipeline automatizzate e test di regressione visiva.
Esempio:
Una grande piattaforma di e-commerce scala le app React utilizzando Next.js per SSR, Redux Toolkit per uno stato prevedibile e micro-frontend per settori verticali isolati.
39) Come si testano i componenti React che utilizzano un comportamento asincrono?
Risposta:
Per testare i componenti React asincroni è necessaria la sincronizzazione tra il test runner e gli aggiornamenti di stato del componente.
migliori pratiche:
- Usa il
waitFororfindBy*query nella libreria di test React. - Chiamate di recupero simulate o API utilizzando
msw. - Preferire falsi timer (
jest.useFakeTimers()) per effetti basati sul timeout.
Esempio:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
Ciò garantisce che il test attenda gli aggiornamenti asincroni di React prima di effettuare asserzioni.
40) Spiega come progetteresti una struttura di progetto React su larga scala e gestibile.
Risposta:
Un progetto React scalabile deve bilanciare modularità, chiarezza e collaborazione di squadra.
Struttura delle cartelle consigliata:
src/ ├── components/ # Reusable UI elements ├── features/ # Feature-specific modules ├── hooks/ # Custom reusable hooks ├── context/ # Global providers ├── pages/ # Route-level views ├── services/ # API and utilities ├── assets/ # Static resources ├── tests/ # Unit & integration tests └── index.js
migliori pratiche:
- Utilizzare importazioni assolute con alias di percorso.
- Mantenere una rigorosa pulizia (ESLint + Prettier).
- Usa il TypeScript per la sicurezza dei tipi.
- Applica i limiti dei componenti con progettazione atomica o suddivisione in sezioni basata sulle funzionalità.
Esempio:
In una configurazione reale, una funzionalità "Utente" potrebbe includere UserSlice.js, UserAPI.js, UserCard.jsxe User.test.js, tutto dentro src/features/user/.
🔍 Le migliori domande per i colloqui su React.js con scenari reali e risposte strategiche
1) Quali sono le principali differenze tra componenti funzionali e di classe in React.js?
Requisiti richiesti al candidato: L'intervistatore vuole verificare la tua conoscenza dell'architettura dei componenti React e delle migliori pratiche moderne.
Esempio di risposta:
“I componenti funzionali sono più semplici e si basano su hook per la gestione dello stato e dei metodi del ciclo di vita, mentre i componenti di classe utilizzano this e metodi del ciclo di vita come componentDidMountOggigiorno i componenti funzionali sono generalmente preferiti perché promuovono un codice più pulito, sono più facili da testare e offrono prestazioni migliori grazie alle ottimizzazioni nel processo di rendering di React."
2) Puoi spiegare come funziona il Virtual DOM in React?
Requisiti richiesti al candidato: L'intervistatore vuole valutare la tua conoscenza del meccanismo di performance principale di React.
Esempio di risposta:
"Il DOM virtuale è una rappresentazione in memoria del DOM reale. Quando lo stato di un componente cambia, React aggiorna prima il DOM virtuale, lo confronta con la versione precedente utilizzando un processo chiamato 'diffing' e quindi aggiorna solo le parti del DOM reale che sono cambiate. Questo approccio migliora le prestazioni riducendo al minimo la manipolazione diretta del DOM."
3) Come si gestisce lo stato in un'applicazione React su larga scala?
Requisiti richiesti al candidato: L'intervistatore vuole conoscere la tua esperienza con le tecniche e gli strumenti di gestione dello Stato.
Esempio di risposta:
Nelle applicazioni di grandi dimensioni, in genere utilizzo librerie di gestione dello stato centralizzate come Redux o Zustand. Redux fornisce un flusso di dati prevedibile e semplifica il debug tramite strumenti di debug con viaggi nel tempo. Per le applicazioni più semplici, preferisco utilizzare l'API Context e gli hook per evitare inutili complessità.
4) Descrivi un momento in cui hai ottimizzato le prestazioni di React.
Requisiti richiesti al candidato: L'intervistatore vuole conoscere la tua esperienza pratica nell'ottimizzazione delle prestazioni.
Esempio di risposta:
“Nel mio ruolo precedente, la nostra applicazione veniva rielaborata eccessivamente a causa di modifiche di stato non necessarie. Ho utilizzato React.memo e useCallback "Hook per evitare inutili ripetizioni del rendering. Ho anche analizzato le prestazioni utilizzando React Profiler e identificato i componenti che necessitavano di memorizzazione, riducendo i tempi di rendering di quasi il 30%".
5) Come gestisci gli effetti collaterali in React?
Requisiti richiesti al candidato: L'intervistatore vuole valutare la tua conoscenza degli hook e della gestione del ciclo di vita.
Esempio di risposta:
“Gestisco gli effetti collaterali come le chiamate API o le manipolazioni DOM utilizzando useEffect "Hook". L'hook mi permette di specificare le dipendenze, assicurando che l'effetto venga eseguito solo quando tali dipendenze cambiano. Questo aiuta a mantenere un comportamento prevedibile ed evitare loop infiniti."
6) Raccontami di un bug impegnativo che hai riscontrato in un progetto React e di come lo hai risolto.
Requisiti richiesti al candidato: L'intervistatore vuole valutare le tue capacità di problem-solving e di debugging.
Esempio di risposta:
"In una posizione precedente, ho riscontrato un bug per cui gli aggiornamenti di stato non si riflettevano nell'interfaccia utente. Dopo aver indagato, ho capito che il problema era causato dalla modifica diretta dell'oggetto di stato anziché dalla creazione di una nuova copia. Ho rifattorizzato il codice per utilizzare aggiornamenti immutabili, risolvendo il problema e migliorando la coerenza dei dati."
7) Come gestisci la convalida dei form nelle applicazioni React?
Requisiti richiesti al candidato: L'intervistatore vuole verificare se hai capito come implementare la convalida dell'input dell'utente.
Esempio di risposta:
"In genere utilizzo componenti controllati per gestire gli input dei moduli, combinati con librerie come Formik o React Hook Form per la convalida. Questi strumenti semplificano la gestione degli errori, la gestione dello stato dei moduli e l'integrazione con librerie di convalida di terze parti come Yup."
8) Descrivi una situazione in cui hai dovuto collaborare con gli sviluppatori backend mentre lavoravi su un progetto React.
Requisiti richiesti al candidato: L'intervistatore vuole valutare le tue capacità di lavoro di squadra e di comunicazione.
Esempio di risposta:
"Nel mio ultimo ruolo, ho collaborato a stretto contatto con gli sviluppatori backend per progettare API REST per un'applicazione dashboard. Abbiamo concordato formati di dati ed endpoint durante le prime fasi di sviluppo. Ho anche creato risposte fittizie per continuare lo sviluppo front-end durante la creazione del back-end, garantendo un'integrazione fluida in seguito."
9) Come ti assicuri che i tuoi componenti React siano riutilizzabili e gestibili?
Requisiti richiesti al candidato: L'intervistatore vuole sapere qual è il tuo approccio alla progettazione dei componenti e alla scalabilità.
Esempio di risposta:
"Seguo il principio di creare componenti piccoli e mirati che gestiscano una sola responsabilità. Utilizzo anche i props per la flessibilità e utilizzo uno stile modulare con CSS-in-JS o componenti con stile. Questo garantisce che i componenti possano essere facilmente riutilizzati e mantenuti in tutto il progetto."
10) Come ti tieni aggiornato sulle tendenze e sulle best practice di React.js?
Requisiti richiesti al candidato: L'intervistatore vuole valutare il tuo impegno nell'apprendimento continuo.
Esempio di risposta:
“Mi tengo aggiornato seguendo la documentazione ufficiale di React e i blog della community. Guardo anche i talk delle conferenze React come React Conf e ascolto podcast come 'React Podcast'. Queste risorse mi aiutano a rimanere informato sulle nuove funzionalità come il rendering simultaneo e i componenti server.”
