Question 1

Qual è la differenza principale tra let e var?

Accepted Answer

let dichiara una variabile con scope di blocco, il che significa che esiste solo all'interno del blocco in cui è definita (tra parentesi graffe). var ha uno scope di funzione, il che può causare bug imprevisti perché la variabile è accessibile in tutta la funzione. Usare let di default previene i problemi di hoisting e le fughe di variabili nei cicli o nelle condizioni.

Question 2

Cos'è JSX in React?

Accepted Answer

JSX è un'estensione della sintassi JavaScript che consente di scrivere markup simile all'HTML direttamente nel codice JavaScript. Viene trasformato in chiamate alla funzione React.createElement da Babel durante la compilazione. Usare JSX rende il codice più leggibile e permette il rilevamento degli errori in fase di compilazione tramite la tipizzazione, combinando la potenza di JavaScript con una sintassi familiare.

Question 3

Cos'è il hook useState in React?

Accepted Answer

useState è un hook di React che gestisce lo stato locale in un componente funzionale. A differenza delle normali variabili JavaScript che vengono resettate ad ogni render, useState preserva il valore dello stato tra render successivi. Questo hook restituisce un array contenente il valore corrente dello stato e una funzione per aggiornarlo, attivando automaticamente un nuovo render del componente quando lo stato cambia.

Question 4

Cos'è il mounting in un componente React?

Accepted Answer

Il mounting è la fase in cui un componente viene creato e inserito nel DOM per la prima volta. Durante questa fase, React inizializza lo state, esegue il codice di costruzione e effettua il primo rendering. È il momento ideale per avviare chiamate API o inizializzare subscription tramite useEffect.

Question 5

Cos'è un CSS Module in React?

Accepted Answer

I CSS Modules generano automaticamente nomi di classe unici aggiungendo un hash al nome della classe, il che previene i conflitti di stili tra componenti. Ogni file CSS Module ha il proprio scope locale, a differenza dei tradizionali fogli di stile globali. Questo approccio consente di scrivere stili modulari senza il rischio di sovrascritture accidentali in altri componenti.

Question 6

Cos'è l'App Router in Next.js?

Accepted Answer

L'App Router è il nuovo sistema di routing di Next.js 13+ basato sulla directory app/. Sostituisce il Pages Router e introduce i Server Components di default, layout condivisi e un modello di routing più flessibile con convenzioni di file come page.tsx, layout.tsx e loading.tsx.

Question 7

Qual è la sintassi corretta per tipizzare le props di un componente React?

Accepted Answer

L'interfaccia Props seguita dalla tipizzazione della funzione con Props come parametro è la sintassi standard raccomandata. Questo approccio offre un'eccellente inferenza dei tipi e permette di riutilizzare facilmente il tipo Props altrove nel codice. È più esplicita di React.FC e permette un migliore controllo sulla tipizzazione dei children.

Question 8

Qual è il ruolo principale di React.memo?

Accepted Answer

React.memo è un Higher-Order Component che memorizza il risultato del rendering di un componente. Esegue un confronto superficiale delle props e salta il re-rendering se le props non sono cambiate. Particolarmente utile per ottimizzare componenti figli costosi che ricevono frequentemente le stesse props.

Question 9

Cos'è un Error Boundary in React?

Accepted Answer

Un Error Boundary è un componente di classe React che cattura gli errori JavaScript che si verificano nell'albero dei suoi componenti figli, mostra un'interfaccia di fallback e impedisce il crash dell'intera applicazione. Utilizza i metodi componentDidCatch() e getDerivedStateFromError() per intercettare e gestire gli errori di rendering.

Question 10

Cos'è il pattern Compound Components?

Accepted Answer

Il pattern Compound Components consente di creare componenti che condividono stato implicito tramite React Context, senza passare props esplicitamente. Questo pattern è usato in librerie come Radix UI e Headless UI per fornire un'API flessibile e componibile. I componenti figlio possono accedere automaticamente allo stato condiviso, consentendo la personalizzazione della struttura senza perdere la logica comune.

Domande da colloquio su React / Next.js

Pronto per il tuo colloquio su React / Next.js?

Esplora tutti gli argomenti React / Next.js

Fondamenti di JavaScript

Fondamenti di React

React Hooks

Ciclo di vita dei componenti

React Router

Gestione dello state con Context

Form e Controlled Components

Recupero dati e API

Domande da colloquio su React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentali di Next.js

TypeScript con React

Data Fetching in Next.js

Server Actions di Next.js

Routing e Navigazione in Next.js

API Routes di Next.js

Metadata & SEO in Next.js

Middleware e Auth in Next.js

Testing React

Domande da colloquio su Zustand State Management

Ottimizzazione delle Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Funzionalità avanzate di Next.js

Deploy e Produzione con Next.js

Architecture & Design Patterns

React Server Components

Internazionalizzazione di Next.js

React Sicurezza & Best Practices

Il lavoro React / Next.js in numeri

Dove sono le offerte React / Next.js

Il mercato React / Next.js oggi

Padroneggia React / Next.js per il tuo prossimo colloquio