Top 40 de întrebări și răspunsuri pentru interviuri React JS (2026)
James Hartman
Te pregătești pentru un interviu React JS? E timpul să explorezi ce te așteaptă. Înțelegere Întrebări de interviu React JS ajută la dezvăluirea atât a clarității conceptuale, cât și a punctelor forte ale implementării în lumea reală.
React JS oferă oportunități de carieră imense pentru profesioniștii cu experiență tehnică și expertiză în domeniu. Indiferent dacă ești absolvent sau absolvent senior cu 5 sau 10 ani de experiență profesională, analiza abilităților și expertiza tehnică contează. Aceste întrebări și răspunsuri îi ajută pe liderii de echipă, managerii și dezvoltatorii să își perfecționeze setul de competențe și să treacă de interviuri de top.
Bazată pe informațiile a peste 85 de profesioniști, inclusiv manageri de angajare și lideri tehnici, această compilație reflectă diverse așteptări din industrie și modele reale de interviuri, colectate de la echipe de lucru din diverse domenii.
Întrebări și răspunsuri importante la interviul React JS
1) Explicați DOM-ul virtual și cum funcționează reconcilierea în React.
Răspuns:
DOM-ul virtual este o reprezentare în memorie a interfeței utilizator (UI) pe care React o întreține pentru a calcula eficient modificările acesteia. Când starea sau prop-urile se modifică, React randează un nou arbore DOM virtual, apoi rulează un diferențiere algoritmul față de arborele anterior pentru a descoperi setul minim de operații DOM reale necesare. Acest proces, numit reconciliere, minimizează deteriorarea aspectului și reorganizarea costisitoare a browserului. React atribuie chei la elementele din liste pentru a ajuta la potrivirea nodurilor între randări și folosește euristică (cum ar fi compararea tipurilor și cheilor) pentru a decide dacă actualizează, reordonează sau elimină noduri. Beneficiile includ actualizări previzibile, o suprafață mai mică pentru erori și o performanță mai bună în interfețe de utilizator complexe.
Exemplu:
Redarea unei liste dinamice de mesaje de chat: utilizând instrumente stabile key valori (ID-uri de mesaje), doar mesajele noi sunt adăugate la DOM, în timp ce nodurile existente rămân neatinse, evitând re-rendările inutile.
👉 Descărcare gratuită PDF: Întrebări și răspunsuri pentru interviul React JS
2) Care sunt diferitele tipuri de cicluri de viață ale componentelor în React și cum se mapează Hook-urile la acestea?
Răspuns:
Componentele React trec prin fazele de montare, actualizare și demontare. În componentele de clasă, metodele ciclului de viață, cum ar fi componentDidMount, shouldComponentUpdate, componentDidUpdate și componentWillUnmount guvernează efectele secundare, luarea deciziilor și curățarea. În componentele funcționale, cârlige oferă capabilități echivalente: useEffect gestionează efectele după randare; funcții de curățare în interior useEffect rulează la demontare sau înainte de următorul efect; useMemo și useCallback controlează memorizarea; și useRef persistă referințe mutabile între randări. Avantajele hook-urilor includ compozabilitatea, mai puține probleme de legare „this” și reutilizarea mai ușoară a logicii prin intermediul hook-urilor personalizate, în timp ce principalul dezavantaj este necesitatea de a învăța Regulile Hook-urilor și gestionarea dependențelor.
Răspundeți cu exemple:
- Efect de montare:
useEffect(() => fetchData(), []). - Curățare la demontare:
useEffect(() => { start(); return stop; }, []).
3) Cum decideți între randarea pe partea de client (CSR), randarea pe partea de server (SSR), generarea statică de site-uri (SSG) și regenerarea statică incrementală (ISR) pentru o aplicație React?
Răspuns:
Strategia de randare ar trebui să fie determinată de cerințele privind experiența utilizatorului, actualitatea datelor, nevoile SEO, constrângerile de infrastructură și viteza de dezvoltare. CSR se potrivește aplicațiilor extrem de interactive în spatele autentificării, unde SEO este secundar. SSR oferă o primă vizualizare cu date reale pentru paginile publice, îmbunătățind timpul de atingere a primului octet și SEO, dar cu costuri mai mari pentru server. SSG precalculează paginile în momentul construirii pentru o viteză excelentă și memorare în cache atunci când datele se modifică rar. ISR actualizează paginile statice incremental la cerere, oferind un echilibru între prospețime și performanță. Factorii includ capacitatea de memorare în cache, personalizarea, latența pentru publicul global și complexitatea operațională.
Tabel: Avantaje vs. Dezavantaje
| Abordarea | Avantaje | Dezavantaje |
|---|---|---|
| CSR | Găzduire simplă, interactivitate bogată | Prima vopsire mai lentă, SEO mai slab |
| SSR | SEO excelent, date proaspete la prima încărcare | Încărcare mai mare a serverului, complexitate |
| SSG | Rapid, ieftin, compatibil cu CDN-urile | Conținut învechit până la reconstrucție |
| ISR | Rapid cu prospețime controlată | Mai multe componente mobile de gestionat |
4) Ce strategie de gestionare a stării ar trebui utilizată: starea locală, Context, Redux sau bibliotecile de interogări?
Răspuns:
Alege cel mai simplu instrument care gestionează caracteristicile problemei. Starea locală a componentei prin intermediul useState or useReducer este ideal pentru probleme izolate ale UI. Context funcționează pentru valori la nivel de aplicație, care necesită citire majoritară (temă, setări regionale, utilizator curent), dar nu este optimizat pentru actualizări de înaltă frecvență în arbori mari. Redux sau magazine similare bazate pe evenimente excelează atunci când aveți nevoie de predictibilitate, depanare în timp, middleware și fluxuri de date strict unidirecționale. Biblioteci de preluare a datelor (de exemplu, modele în stil React Query) gestionează ciclurile de viață ale stării serverului - caching, deduping, strategii de reîncărcare și sincronizare - reducând boilerplate-ul. O arhitectură pragmatică folosește frecvent stare locală + Context pentru configurare + o bibliotecă de stări ale serverului, rezervând Redux pentru fluxuri de lucru complexe.
Exemplu:
Un tablou de bord folosește React Query pentru cache-ul API, Context pentru temă și useReducer în interiorul widget-urilor complexe pentru gestionarea evenimentelor locale.
5) Care este diferența dintre useEffect și useLayoutEffect și când se aplică fiecare?
Răspuns:
useEffect rulează după ce browserul a desenat, ceea ce îl face potrivit pentru sarcini neblocante, cum ar fi preluarea datelor, abonamentele și înregistrarea în jurnal. useLayoutEffect execută sincron după mutațiile DOM, dar înainte de vopsire, permițând ajustări de măsurare și aspect care trebuie să aibă loc fără pâlpâire (de exemplu, citirea dimensiunilor elementelor și reaplicarea sincronă a stilurilor). Dezavantajul useLayoutEffect este că poate bloca pictura și poate afecta răspunsul dacă este folosit excesiv. O regulă bună este să începeți cu useEffect pentru efecte secundare și să apeleze la useLayoutEffect numai atunci când trebuie să măsurați sau să modificați sincron aspectul pentru a asigura corectitudinea vizuală.
Răspundeți cu exemple:
useEffect: preia profilul utilizatorului după randare.useLayoutEffect: măsoară dimensiunea unui tooltip pentru a-l poziționa înainte de vopsire.
Comparație rapidă
| Caracteristică | useEffect | utilizațiEfect de aspect |
|---|---|---|
| Sincronizare | După vopsire | Înainte de vopsire |
| Exemple | Date, abonamente | Măsurători, corecții ale aspectului sincron |
| Risc | Ușor șoc dacă este greu | Blochează vopseaua dacă este grea |
6) Explicați cum funcționează cheile în liste și dezavantajele utilizării indicilor din tablouri.
Răspuns:
Cheile permit reconcilierea React pentru a identifica cu precizie elementele listei între randări. Cheile stabile și unice permit React să reordoneze, să insereze sau să elimine elemente cu o pierdere minimă a DOM-ului. Utilizarea indici de matrice ca chei este problematic atunci când elementele pot fi reordonate, inserate sau șterse, deoarece React poate asocia starea anterioară cu elementul greșit, cauzând erori subtile (de exemplu, valori de intrare sau animații incorecte). Cea mai bună practică este utilizarea unui identificator imuabil, specific domeniului, cum ar fi un ID de bază de date. Dacă lista este cu adevărat statică și nu se reordonează niciodată, indexurile sunt acceptabile, dar aceasta este excepția și nu regula.
Exemplu:
O tablă Kanban glisabilă ar trebui să utilizeze ID-uri de carduri, nu indexuri, pentru a păstra identitatea componentelor în timpul funcției drag and drop.
7) Unde se aplică tehnicile de memoizare în React și care sunt avantajele și dezavantajele lor?
Răspuns:
Memo-izarea reduce calculele și re-randările inutile prin reutilizarea rezultatelor anterioare atunci când intrările nu s-au modificat. În React, React.memo stochează în cache ieșirea componentelor, useMemo stochează în cache calcule costisitoare și useCallback memorizează identitățile funcțiilor transmise copiilor. Principalele avantaje sunt stabilitatea performanței și utilizarea redusă a procesorului în condiții de interacțiune intensă. Dezavantajele includ complexitatea, potențialele erori de memorie cache învechită dacă dependențele sunt greșite și supraîncărcarea memoriei.
Tabel: Diferite moduri de memorare
| Tip | Scop | Factori tipici de luat în considerare |
|---|---|---|
React.memo(Component) |
Sari peste re-randare dacă prop-urile sunt superficiale și egale | Volatilitatea propunerii, costul copilului |
useMemo(fn, deps) |
Valorile calculate în cache | Costul calculului vs. memoria |
useCallback(fn, deps) |
Identitate de funcție stabilă | Corectitudinea dependenței |
Răspundeți cu exemple:
Memorează un set de date filtrat și sortat pentru o grilă folosind useMemoși înfășoară componentele de renderer celular cu React.memo pentru a evita furtunile de re-rendare.
8) Preferați componente controlate sau necontrolate pentru formulare? Discutați beneficiile, dezavantajele și tipurile de stări ale formularului.
Răspuns:
Componente controlate leagă intrările la starea React prin value și onChange, permițând validarea, mascarea și interfața cu utilizatorul condiționată derivate dintr-o singură sursă de adevăr. Avantajele sunt predictibilitatea și integrarea ușoară cu alte stări; dezavantajele includ costul de re-randare la fiecare apăsare de tastă, fără optimizare. Componente necontrolate se bazează pe DOM ca sursă de adevăr folosind ref, oferind costuri suplimentare mai mici și o conectare mai simplă pentru formularele de bază, dar o validare mai puțin centralizată. Pentru fluxurile de lucru complexe, un model hibrid este comun, folosind intrări controlate pentru câmpuri critice și necontrolate pentru zone mari, cu text încărcat.
Exemplu:
Un formular de înscriere folosește câmpuri controlate pentru validarea adresei de e-mail și a parolei, în timp ce o zonă de text pentru note este necontrolată pentru a reduce costurile de re-randare.
9) Când ați folosi Context versus un hook personalizat și care este diferența dintre ele din punct de vedere conceptual?
Răspuns:
Context este mecanism de transport pentru valori de care au nevoie multe componente, evitând găurirea cu elice. Nu gestionează starea de la sine; pur și simplu o expune descendenților. A cârlig personalizat încapsulează logica reutilizabilă — combinând starea, efectele și serviciile externe — returnând valori și funcții. Folosește Context pentru a oferi o configurație partajată, în mare parte citibilă, sau pentru a expune un magazin și folosește hook-uri personalizate pentru a implementa comportamentul magazinului sau pentru a orchestra probleme precum autentificarea, semnalizările de caracteristici sau politicile de preluare a datelor. Cele două sunt complementare: un model comun este useAuth() ca un cârlig personalizat susținut de un AuthContext.
Răspundeți cu exemple:
AuthProvider furnizează utilizator și token-uri prin Context; useAuth gestionează efectele secundare ale autentificării, reîmprospătării și deconectării.
10) Puteți schița strategii de optimizare a performanței pentru aplicațiile React mari, inclusiv caracteristicile randărilor lente și ale punctelor fierbinți din ciclul de viață?
Răspuns:
Reglarea performanței începe cu măsurarea. Identificați căile lente folosind React DevTools Profiler și panourile de performanță ale browserului pentru a localiza punctele fierbinți de reconciliere și commit-urile costisitoare. Tacticile includ localitate statală (a menține statul aproape de consumatorii săi), memoizare (React.memo, useMemo, useCallback), virtualizarea listei pentru liste lungi, divizarea codului cu încărcare leneșă pentru a reduce pachetul inițial și debouncing sau throttling evenimente de înaltă frecvență. Pentru datele de pe server, adoptați memoria cache cu o bibliotecă de interogări și valorificați prietenos cu suspansul șabloane pentru o încărcare mai lină. Fiți atenți la punctele fierbinți din ciclul de viață, cum ar fi efectele care rulează prea des din cauza matricelor largi de dependențe sau componentele care se redau din nou din cauza valorilor Context care se schimbă frecvent.
Răspundeți cu exemple:
Virtualizați un tabel cu 10,000 de rânduri folosind o bibliotecă de ferestre; încărcați diagrame grele în mod lenjerie în spatele divizării codului bazate pe rute pentru a îmbunătăți aspectul inițial.
11) Care este diferența dintre obiecte (props) și stare (state) în React?
Răspuns:
Ambele props și state influențează modul în care sunt randate componentele, dar scopul și ciclul lor de viață diferă fundamental. recuzită (prescurtare de la proprietăți) sunt intrări imuabile transmise de la o componentă părinte la o componentă copil, definind configurația sau datele pentru randare. Acestea curg în jos în fluxul de date unidirecțional al React și nu ar trebui niciodată modificat de componenta receptoră. Stat, pe de altă parte, este modificabil și întreținut intern de către componentă. Acesta determină un comportament dinamic care se schimbă în timp, cum ar fi valorile de intrare ale formularului sau vizibilitatea comutată.
Tabelul diferențelor cheie:
| Factor | recuzită | Stat |
|---|---|---|
| Mutabilitate | Imuabil | Mutabil |
| Proprietate | Transmis de părinte | Deținut de componentă |
| Metoda de actualizare | Re-randarea părintelui | useState or setState |
| Utilizare caz | Configuraţie | Modificări dinamice ale interfeței utilizator |
| Ciclul Vietii | Există în timpul randării | Persistă, declanșează re-randarea |
Exemplu:
A <Button color="blue" /> folosește recuzită pentru a decide culoarea, în timp ce un clicked boolean în starea sa comută feedback-ul vizual.
12) Explicați modelul arhitecturii componentelor în React și diferitele moduri în care componentele sunt clasificate.
Răspuns:
Aplicațiile React urmează o arhitectura bazata pe componente, dividând interfața utilizator în blocuri de construcție mici, reutilizabile. Componentele pot fi clasificate după scop și responsabilitate:
- Componente de prezentare (stupide) – Concentrare pe interfața cu utilizatorul, primire de date prin intermediul elementelor de recuzită și rareori gestionare a stării.
- Componente (inteligente) pentru containere – Gestionează logica, preiau date și gestionează starea; redau componente de prezentare.
- Componente de ordin superior (HOC) – Funcții care preiau o componentă și returnează o versiune îmbunătățită cu un comportament suplimentar.
- Componente pure – Optimizează performanța prin compararea superficială a elementelor de recuzită și a stării.
- Componente funcționale vs. componente de clasă – Componentele funcționale (cu cârlige) sunt acum preferate pentru lizibilitate și performanță.
Exemplu:
A <UserProfile /> componentă poate fi prezentațională, primind informații despre utilizator, în timp ce <UserProfileContainer /> preia date și gestionează ciclul lor de viață.
13) Cum gestionează React limitele de eroare și de ce sunt acestea importante?
Răspuns:
Limite de eroare sunt componente speciale React care prind JavaErori de script oriunde în arborele componentelor copil în timpul redării, metodelor ciclului de viață sau constructorilor. Acestea previn blocarea întregii aplicații prin izolarea erorilor în subarbori specifici. Puteți implementa unul folosind componentDidCatch(error, info) și static getDerivedStateFromError() într-o componentă a clasei.
avantaje:
- Păstrați stabilitatea interfeței utilizator afișând interfețe utilizator de rezervă.
- Capturați și înregistrați erorile pentru analiză.
- Preveniți demontările în cascadă.
Exemplu:
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) Ce sunt fragmentele React și cum diferă acestea de wrapper elemente?
Răspuns:
Reacţiona fragmente (<></>) vă permit să grupați mai multe elemente fără a adăuga noduri suplimentare la DOM. Acest lucru este esențial pentru o structură mai curată, în special în liste, tabele și HTML semantic, unde wrapper-ele suplimentare ar putea cauza probleme de aspect sau accesibilitate. Spre deosebire de wrapper-e <div>Fragmentele nu sunt redate în DOM și, prin urmare, au avantaje de performanță și semantice.
Exemplu:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
Tabelul diferențelor:
| Factor | fragment | <div> ambalaj |
|---|---|---|
| Ieșire DOM | Nici unul | Adaugă un nod suplimentar |
| Utilizare caz | Grup structuralping | Stilizare sau aspect |
| Performanţă | Mai bine | Ușoare cheltuieli generale |
15) Ce React Hook ai folosi pentru optimizarea performanței și de ce?
Răspuns:
Componentele React sensibile la performanță se bazează adesea pe cârlige de memorizare și încărcătură leneșă pentru a minimiza munca redundantă. Cârligele comune includ:
useMemo→ Stochează în cache rezultatele costisitoare din punct de vedere computațional.useCallback→ Previne randările inutile ale copiilor din cauza modificărilor identității funcțiilor.useTransition→ Amână actualizările neurgente pentru o interfață mai fluidă.useDeferredValue→ Amână calculele complexe până după interacțiuni imediate.
Exemplu:
O grilă de date mare care folosește useMemo pentru rezultatele filtrate poate reduce consumul de CPU cu 50% sau mai mult.
avantaje:
- Reduce randările risipite.
- Menține interfața cu utilizatorul receptivă sub sarcină.
Dezavantaj:
- Necesită precizie în dependențe; pot apărea erori de cache învechite dacă este gestionat incorect.
16) Ce sunt portalurile React și care sunt avantajele lor?
Răspuns:
Portaluri permite componentelor React să redea copii într-un nod DOM în afara ierarhiei părinte, de obicei pentru modale, tooltip-uri sau dropdown-uri care trebuie să „scape” vizual de contextele de overflow sau stacking. Implementat folosind ReactDOM.createPortal(child, container), acestea mențin consecvența apariției evenimentelor în bule, astfel încât gestionatoarele de evenimente funcționează ca și cum elementul ar fi rămas în ierarhia sa originală.
Tabelul avantajelor:
| Avantaj | Descriere |
|---|---|
| Independenta structurala | Randare în afara arborelui părinte |
| Control CSS/Stacking | Evita overflow: hidden sau probleme cu z-index |
| Propagarea evenimentelor | Evenimentele sintetice ale lui React încă se formează corect în bule |
| Abilitatea de Reus | Ideal pentru suprapuneri globale |
Exemplu:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) Explicați cum gestionează React Router navigarea și starea între pagini.
Răspuns:
React Router este o bibliotecă de rutare declarativă care sincronizează interfața utilizator cu interfața browserului. URL. Se folosește de API-ul istoric pentru a manipula istoricul sesiunilor fără reîncărcări complete ale paginii. Conceptele de bază includ rute, Link-uri și Outlet pentru rutare imbricată. Biblioteca acceptă rute dinamice, URL parametrii și cârlige de navigare (useNavigate, useParams, useLocationReact Router v6 a introdus o sintaxă simplificată și API-uri de date pentru încărcător și acțiune funcții, îmbunătățind integrarea SSR și gestionarea stării.
Exemplu:
<Route path="/user/:id" element={<UserProfile />} />
Beneficii:
- Permite navigarea pe o singură pagină.
- Menține poziția de derulare și istoricul.
- Se integrează perfect cu încărcarea lentă pentru o performanță mai bună.
18) Care sunt diferitele modalități de a gestiona efectele secundare în aplicațiile React?
Răspuns:
Efectele secundare se referă la acțiuni care afectează ceva în afara domeniului de aplicare al unei componente (apeluri API, manipulare DOM, abonamente). Principalele instrumente includ:
useEffectpentru efectele asupra clientului după randare.- Manipulatori de evenimente pentru efecte conduse de utilizator.
- Cârlige personalizate pentru a reutiliza logica efectelor (de exemplu,
useFetch). - middleware (cum ar fi Redux Saga sau Thunk) pentru orchestrare asincronă complexă.
- React Query sau SWR pentru gestionarea automată a stării serverului și a ciclurilor de viață ale reîncărcării.
Exemplu:
A useEffect preia datele odată ce este montat:
useEffect(() => { fetchData(); }, []);
avantaje:
Gestionare asincronă simplificată, încapsulare mai bună și control mai clar al ciclului de viață.
19) React este un framework sau o bibliotecă? Discutați factorii care definesc diferența.
Răspuns:
React este oficial un bibliotecă, nu un cadru complet. Se concentrează exclusiv pe strat de vizualizare, oferind randare, stare și abs componentetracțiuni fără a impune rutare, preluare a datelor sau structura de construcție.
Tabel comparativ:
| Factor | Bibliotecă (React) | Framework (Angular, Vue) |
|---|---|---|
| domeniu | Vizualizare randare | Arhitectură MVC completă |
| înfumurat | Scăzut | Înalt |
| Mod de control: | Condus de dezvoltatori | Bazat pe cadru |
| Flexibilitate | Înalt | Limitat de convenții |
| Curbă de învățare | Moderat | Mai mare din cauza complexității |
Ecosistemul React (Redux, Router, Query, Next.js) formează efectiv un „meta-framework”, oferind compozabilitate modulară ce permite dezvoltatorilor să-și construiască propria arhitectură.
20) Când ar trebui să folosești React.lazy și Suspense și care sunt avantajele lor?
Răspuns:
React.lazy permite divizarea codului prin încărcarea dinamică a componentelor doar atunci când este nevoie, în timp ce Suspense oferă o interfață de utilizator de rezervă până când componenta este gata. Această combinație îmbunătățește performanța încărcării inițiale și timpul de răspuns perceput de utilizator.
Exemplu:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
Tabelul avantajelor:
| Avantaj | Explicație |
|---|---|
| Performanţă | Încarcă codul la cerere |
| Experiența de utilizare | Încărcare elegantă de rezervă |
| Dimensiunea pachetului | Pachet inițial mai mic |
| Simplitate | API React nativ, configurare minimă |
Cele mai bune practici:
- Încadrați mai multe componente leneșe într-o singură limită de suspans.
- Folosește indicatori de rezervă semnificativi pentru accesibilitate.
21) Explicați ce sunt componentele React Server (RSC) și avantajele lor.
Răspuns:
Componentele React Server (RSC) reprezintă o inovație majoră introdusă pentru a îmbunătăți performanța și experiența dezvoltatorilor, permițând componentelor să randează pe server fără a trimite JavaScript către clientAcestea se execută în întregime pe server, preluând date, citind din baze de date sau efectuând operațiuni I/O în siguranță înainte de a transmite în flux ieșirea serializată către client.
avantaje:
- Dimensiune mai mică a pachetului — Fără JS client pentru logica exclusivă de server.
- Performanta imbunatatita — Preluarea datelor de pe server reduce cascadele.
- Securitate — Codul sensibil nu ajunge niciodată în browser.
- Cache mai bună — Componentele serverului pot fi memorate în cache la marginea rețelei.
Exemplu:
A <ProductList /> componentă de server poate prelua date direct dintr-o bază de date și poate transmite rezultatele către un <ProductCard /> componentă client.
22) Care este diferența dintre hidratarea prin reacție și reconciliere?
Răspuns:
Deși ambii termeni implică actualizarea interfeței utilizator de către React, scopul lor diferă:
- Reconciliere este procesul de comparare a arborelui DOM virtual cu versiunea sa anterioară pentru a determina setul minimal de actualizări DOM.
- Hidratare, pe de altă parte, este procesul de atașare a ascultătorilor de evenimente și a structurilor interne ale React la HTML randat de server pe partea clientului, transformând markup-ul static într-o aplicație complet interactivă.
Tabel comparativ:
| Factor | Reconciliere | Hidratare |
|---|---|---|
| trăgaci | Re-randare client | Încărcarea inițială a paginii (SSR) |
| Scop | Actualizați DOM eficient | Faceți HTML-ul SSR interactiv |
| domeniu | Diferența DOM virtuală | Legarea evenimentului + reatașarea stării |
| Frecvență | De mai multe ori | Odată după randarea SSR |
Exemplu:
După ce o aplicație Next.js trimite HTML pre-randat, React hidrați astfel încât componentele să răspundă la evenimente fără a re-randa totul.
23) Cum îmbunătățește randarea concurentă experiența utilizatorului în React 18+?
Răspuns:
Randarea concurentă permite React să întrerupă, să pauză sau să reia randarea în funcție de prioritatea utilizatorului. Acest lucru previne blocarea interfeței utilizator în timpul calculelor intense sau al re-randărilor. Funcții precum useTransition și useDeferredValue valorifică această capacitate pentru a separa actualizări urgente (ca și tu)ping) de la neurgent cele (cum ar fi filtrarea).
Beneficii:
- Interacțiuni fluide și receptive.
- Secționare temporală pentru a preveni blocarea firului principal de execuție.
- Prioritizare previzibilă pentru o experiență de utilizare mai bună.
Exemplu:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
Aici, dragăping rămâne fluid chiar și atunci când filtrează seturi mari de date, deoarece React programează simultan actualizările non-urgente.
24) Care sunt diferitele modalități de a efectua testarea în aplicațiile React?
Răspuns:
Testarea reacțiilor poate fi clasificată în unitate, integrare și un capăt la altul niveluri.
Tabelul metodelor de testare:
| Tip | Instrument | Scop |
|---|---|---|
| Unitate | există | Testarea funcțiilor/componentelor izolate |
| Integrare | React Test Library | Testați interacțiunile cu interfața utilizator și schimbările de stare |
| E2E | Cypress / Dramaturg | Testați fluxurile utilizatorilor în browsere reale |
Cele mai bune practici:
- Prefera React Test Library peste Enzimă (modernă, orientată spre DOM).
- API-uri simulate folosind
msw(Lucrător în servicii simulate). - Evitați testarea detaliilor implementării - concentrați-vă pe comportament.
Exemplu:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) Care instrumente de compilare și bundlere sunt cel mai frecvent utilizate cu React și care sunt diferențele dintre ele?
Răspuns:
React se poate integra cu mai multe bundlere și compilatoare, fiecare optimizat pentru diferite cazuri de utilizare.
Tabel comparativ:
| Instrument | caracteristici | Avantaje | Dezavantaje |
|---|---|---|---|
| WebPACK | Foarte configurabil | Matur, bogat în plugin-uri | Configurare complexă |
| Vieți | Server de dezvoltare ultra-rapid, bazat pe ESM | HMR instantaneu, sintaxă modernă | Suport limitat pentru plugin-uri vechi |
| Colet | Configurație zero | Optimizare automată | Less flexibil |
| esbuild | Compilator bazat pe Go | Extrem de rapid | Mai puține pluginuri de ecosistem |
Exemplu:
Proiectele moderne adoptă adesea Vieți pentru viteza de dezvoltare și esbuild în conductele CI/CD pentru construcții eficiente din producție.
26) Cum extinde Next.js capacitățile React?
Răspuns:
Next.js este un Cadru de reacție oferind o arhitectură bazată pe opinii pentru rutare, SSR și generare statică. Introduce modele de randare hibridă, rute API și funcții de implementare edge-ready.
avantaje:
- Built-in SSR/SSG/ISR sprijini.
- Router de aplicații cu componentele React Server.
- Optimizarea imaginilor și middleware pentru performanță și securitate.
- Rute API simple pentru funcții serverless.
Exemplu:
app/page.js pentru pagini randate prin SSR; app/api/route.js pentru punctele finale ale serverului.
Pe scurtNext.js permite aplicații React de nivel de producție cu o configurare minimă.
27) Care sunt unele dintre problemele comune de performanță în React și cum le puteți evita?
Răspuns:
Printre problemele comune de performanță ale React se numără:
- Re-randări inutile — Remediază utilizarea
React.memosau divizarea componentelor. - Crearea de obiecte/matrice inline - Utilizare
useMemopentru referințe stabile. - Liste mari — Implementează fenestrarea (
react-window,react-virtualized). - Calcule grele — Memorizați sau delegați sarcina către lucrătorii web.
- Suprautilizarea contextului — Actualizările frecvente se propagă profund; se preferă starea derivată.
Exemplu:
Daca treci { a: 1 } în linie cu o componentă memorizată, aceasta este re-randată la fiecare randare părinte. Se remediază prin memorizarea obiectului.
Tabel cu sfaturi de performanță:
| Emisiune | Tehnica de optimizare |
|---|---|
| Re-rendează | React.memo, useCallback |
| Calcule costisitoare | useMemo, Lucrătorii web |
| Seturi mari de date | virtualizare |
| Actualizări frecvente ale contextului | Localizați starea |
28) Explicați diferența dintre useReducer și useState.
Răspuns:
Ambele hook-uri gestionează starea, dar diferă în complexitate și control.
useStateeste ideal pentru tranziții de stare simple, izolate.useReducercentralizează logica complexă de stare într-o funcție de reductor, Folosinddispatchacțiuni pentru actualizări previzibile.
Tabel comparativ:
| Factor | useState | utilizați Reducer |
|---|---|---|
| Sintaxă | [value, setValue] |
[state, dispatch] |
| Complexitate | simplu | Moderat spre complex |
| Utilizare caz | State independente | Stări înrudite sau imbricate |
| Depanarea | Less prolix | Mai ușor prin acțiuni înregistrate |
| Exemplu | Comutatoare formular | Validarea formularelor sau formularele cu mai mulți pași |
Exemplu:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) Cum poți îmbunătăți accesibilitatea (a11y) în aplicațiile React?
Răspuns:
Accesibilitatea asigură că toți utilizatorii, inclusiv cei cu dizabilități, pot utiliza aplicația eficient. React facilitează accesibilitatea prin marcaj semantic și atribute ARIA.
Cele mai bune practici:
- Utilizare HTML semantic (
<button>vs<div onClick>). - Gestionați concentrarea folosind
refșitabIndex. - Folosește roluri ARIA pentru componente dinamice.
- Asigurați contrastul culorilor și alternativele de text pentru imagini.
- Utilizați instrumente precum eslint-plugin-jsx-a11y și topor-miez pentru audituri.
Exemplu:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
avantaje:
- Acoperirea unui public mai larg.
- Îmbunătățirea SEO.
- Respectarea standardelor WCAG.
30) Puteți descrie cum diferă divizarea codului și încărcarea lentă și când se utilizează fiecare?
Răspuns:
Ambele tehnici optimizează dimensiunea fasciculului și performanța încărcării, dar diferă prin momentul execuției.
- Code despicare împarte pachetele mari în bucăți mai mici care pot fi încărcate independent.
- Lazy încărcare întârzie încărcarea acelor fragmente până când sunt necesare.
Tabel comparativ:
| Factor | Code Despicare | Se încarcă leneș |
|---|---|---|
| Definiție | Împarte codul în bucăți | Încarcă fragmente la cerere |
| Instrument | Webpack, Vite | React.lazy, dinamic import() |
| Scop | Optimizați dimensiunea pachetului | Îmbunătățiți performanța în timpul execuției |
| Execuție | Timp de construire | Runtime |
Exemplu:
const Settings = React.lazy(() => import('./Settings'));
Utilizate împreună, aceste tehnici reduc timpul de interacțiune și îmbunătățesc viteza percepută a aplicațiilor mari.
31) Explicați conceptul de elemente de redare și cum diferă acesta de componentele de ordin superior (HOC).
Răspuns:
Recuzită de randare este un model în React în care o componentă acceptă un funcționează ca recuzită care îi spune ce să randeze. Acest lucru permite partajarea logicii componentelor între mai multe componente fără duplicare.
HOC-urile, pe de altă parte, încadra o componentă și returnează o versiune îmbunătățită cu elemente de recuzită sau comportamente injectate.
Tabel comparativ:
| Factor | Recuzită de randare | HOC |
|---|---|---|
| Punerea în aplicare | Funcționează ca și copil | Încadrare funcțieping component |
| Compoziție | Control inline | Încadrare declarativăping |
| Diviziune | Adesea mai clar | Poate provoca iadul ambalajului |
| Utilizare caz | Logică de randare dinamică | Preocupări transversale |
Exemplu:
<DataProvider render={data => <UserList users={data} />} />
Propurile de randare oferă o flexibilitate mai bună și evită coliziunile de nume frecvente în HOC-uri.
32) Care sunt diferitele tipuri de cârlige personalizate și avantajele acestora?
Răspuns:
Hook-urile personalizate încapsulează logica reutilizabilă, combinând starea, efectele secundare și utilitățile. Acestea îmbunătățesc reutilizabilitatea codului, separarea preocupărilor și testabilitatea.
Tipuri și exemple:
- Cârlige de gestionare a statului -
useToggle,useForm. - Cârlige de preluare a datelor -
useFetch,useQuery. - Hook-uri UI/UX -
useWindowSize,useDarkMode. - Cârlige de integrare -
useLocalStorage,useMediaQuery. - Cârlige de performanță -
useDebounce,useThrottle.
avantaje:
- Reutilizarea logicii centralizate.
- Componente mai curate.
- Testare independentă.
Exemplu:
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) Cum gestionați pierderile de memorie în aplicațiile React?
Răspuns:
Pierderile de memorie apar atunci când componentele nemontate încă dețin referințe la resurse sau abonamente. Acestea degradează performanța și provoacă un comportament imprevizibil.
Tehnici de prevenție:
- Efecte de curățare in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - Anulați apelurile asincrone folosind
AbortController. - Evitați păstrarea închiderilor vechi referindu-se la vechile recuzite/state.
- Dezabonare de la evenimente sau socket-uri la demontare.
- Folosește React Profiler pentru a detecta creșterea lentă a memoriei.
Exemplu:
Într-o aplicație de chat, deconectați întotdeauna listenerele socket atunci când un utilizator părăsește camera de chat.
34) Care sunt cele mai bune practici pentru gestionarea formularelor în aplicațiile React mari?
Răspuns:
Gestionarea formularelor în aplicațiile React la scară largă necesită un echilibru între control, performanță și mentenabilitate.
Cele mai bune practici:
- Folosește biblioteci precum Formik, React Hook Form, Forma finală pentru validare și înregistrare pe teren.
- Grupați câmpurile corelate folosind componente sau contexte imbricate.
- Aplică validarea schemei (Da, Zod) pentru consecvență.
- Deblochează validările complexe sau verificările API.
- Păstrați starea formularului localizată, cu excepția cazului în care este necesar la nivel global.
Exemplu:
Formularul React Hook minimizează re-rendările prin izolarea stării de intrare.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) Care modele de design sunt cele mai utile în dezvoltarea React și care sunt caracteristicile lor?
Răspuns:
React se pretează în mod natural la mai multe modele de design software pentru o arhitectură UI scalabilă și ușor de întreținut.
| Model | Descriere | Exemplu |
|---|---|---|
| Prezentator de containere | Separă logica (containerul) de interfața utilizator (prezentator) | Container de date → Componentă UI |
| Controlat-Necontrolat | Gestionarea datelor formularului prin stare vs. DOM | Formik vs. intrări brute |
| Componente compuse | Părintele controlează componența copilului | <Tabs><Tab /></Tabs> |
| Modelul furnizorului | Partajează starea prin Context | Furnizor de teme |
| Model de cârlige | Reutilizați logica cu stări | useAuth, useFetch |
Exemplu:
A Tabs componenta expune contextul astfel încât <Tab> copiii se înregistrează automat — o aplicare curată a Componentă compusă model.
36) Care sunt principalele diferențe dintre React 18 și React 19?
Răspuns:
React 19 se bazează pe fundația concurentă a React 18 cu capabilități noi semnificative.
| Caracteristică | Reacționează 18 | Reacționează 19 |
|---|---|---|
| Randare concurentă | introdus | Îmbunătățit cu un suspans mai bun |
| Componentele serverului | Experimental | Stabilizat și integrat |
| API-ul Acțiunilor | Nu este disponibil | Nou standard pentru gestionarea acțiunilor formularului |
| Încărcarea activelor | Manual | Încărcare automată a resurselor |
| Gestionarea erorilor îmbunătățită | pachet de bază | Granular cu cârlige de delimitare |
Beneficii cheie:
React 19 se concentrează pe mutații de date mai simple, acțiuni de formular încorporate și control asincron îmbunătățit, ceea ce face ca SSR și hidratarea progresivă să fie mai fluide.
37) Cum funcționează Micro-Frontend ArchiSe integrează tectura cu React și care sunt avantajele sale?
Răspuns:
Micro-frontend-urile împart o aplicație web mare în module front-end independente și implementabile. Într-un ecosistem React, fiecare micro-frontend este o aplicație independentă care poate fi integrată prin Federația Modulelor, iframe, încărcătoare personalizate în timpul rulării.
avantaje:
- Implementare și scalare independente.
- Autonomie a echipei în cadrul stivelor tehnologice.
- Construcții mai rapide de conducte de producție.
Exemplu:
Utilizarea Federația de module Webpack, echipele pot expune dinamic componentele React în aplicații:
exposes: { './NavBar': './src/NavBar' }
Dezavantaje:
- Complexitatea managementului stării partajate.
- Costuri suplimentare de performanță din partea pachetelor izolate.
38) Care sunt factorii pe care îi luați în considerare pentru scalarea unei aplicații React în producție?
Răspuns:
Scalarea aplicațiilor React implică considerații tehnice, arhitecturale și operaționale.
Factori cheie:
- Code structura — adoptarea monorepos (Nx/Turborepo) pentru partajarea modulară a codului.
- Conducerea statului — segmentează stările locale vs. globale vs. server.
- Performanţă — încărcare lentă, memorizare, memorare în cache CDN.
- Monitorizarea — folosiți Sentry, Datadog sau LogRocket pentru erori și metrici.
- Testare și CI/CD — conducte automatizate și teste de regresie vizuală.
Exemplu:
O platformă mare de comerț electronic scalează aplicațiile React folosind Next.js pentru SSR, Redux Toolkit pentru stări previzibile și micro-frontend-uri pentru verticale izolate.
39) Cum testezi componentele React care utilizează comportament asincron?
Răspuns:
Testarea componentelor React asincrone necesită sincronizare între rulatorul de teste și actualizările de stare ale componentei.
Cele mai bune practici:
- Utilizare
waitFororfindBy*interogări în biblioteca React Testing. - Apeluri sau API-uri de tip „mock fetch” folosind
msw. - Prefera cronometre false (
jest.useFakeTimers()) pentru efecte bazate pe timeout.
Exemplu:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
Acest lucru asigură că testul așteaptă actualizările asincrone ale React înainte de a face aserțiuni.
40) Explicați cum ați proiecta o structură de proiect React la scară largă și ușor de întreținut.
Răspuns:
Un proiect React scalabil trebuie să echilibreze modularitatea, claritatea și colaborarea în echipă.
Structura de foldere recomandată:
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
Cele mai bune practici:
- Folosește importuri absolute cu aliasuri de cale.
- Mențineți o curățare strictă a scamei (ESLint + Prettier).
- Utilizare TypeScript pentru siguranța tipului.
- Aplicați limitele componentelor cu design atomic sau feliere bazată pe caracteristici.
Exemplu:
Într-o configurație reală, o caracteristică „Utilizator” ar putea include UserSlice.js, UserAPI.js, UserCard.jsx și User.test.js, toate înăuntru src/features/user/.
🔍 Întrebări de interviu de top pentru React.js cu scenarii din lumea reală și răspunsuri strategice
1) Care sunt diferențele cheie dintre componentele funcționale și cele de clasă în React.js?
Așteptat de la candidat: Intervievatorul dorește să vă testeze înțelegerea arhitecturii componentelor React și a celor mai bune practici moderne.
Exemplu de răspuns:
„Componentele funcționale sunt mai simple și se bazează pe hook-uri pentru gestionarea stării și a metodelor ciclului de viață, în timp ce componentele de clasă folosesc this și metode de ciclu de viață, cum ar fi componentDidMountComponentele funcționale sunt în general preferate astăzi deoarece promovează un cod mai curat, sunt mai ușor de testat și au performanțe mai bune datorită optimizărilor din procesul de randare al React.
2) Poți explica cum funcționează Virtual DOM în React?
Așteptat de la candidat: Intervievatorul dorește să evalueze înțelegerea mecanismului de bază al performanței React.
Exemplu de răspuns:
„DOM-ul virtual este o reprezentare în memorie a DOM-ului real. Când starea unei componente se schimbă, React actualizează mai întâi DOM-ul virtual, îl compară cu versiunea anterioară folosind un proces numit «diffing» și apoi actualizează doar părțile DOM-ului real care s-au modificat. Această abordare îmbunătățește performanța prin minimizarea manipulării directe a DOM-ului.”
3) Cum gestionezi starea într-o aplicație React la scară largă?
Așteptat de la candidat: Intervievatorul dorește să afle despre experiența dumneavoastră cu tehnicile și instrumentele de management al statului.
Exemplu de răspuns:
„În aplicațiile mari, utilizez de obicei biblioteci centralizate de gestionare a stării, cum ar fi Redux sau Zustand. Redux oferă un flux de date previzibil și facilitează depanarea prin intermediul instrumentelor de depanare bazate pe călătoria în timp. Pentru aplicațiile mai simple, prefer să utilizez API-ul Context și hook-urile pentru a evita complexitatea inutilă.”
4) Descrieți un moment în care ați optimizat performanța React.
Așteptat de la candidat: Intervievatorul dorește să înțeleagă experiența ta practică în optimizarea performanței.
Exemplu de răspuns:
„În rolul meu anterior, aplicația noastră se re-randa excesiv din cauza unor modificări de stare inutile. Am folosit React.memo si useCallback „hook pentru a preveni re-randarea inutilă. De asemenea, am analizat performanța folosind React Profiler și am identificat componentele care necesitau memoizare, ceea ce a redus timpul de randare cu aproape 30%.“
5) Cum gestionezi efectele secundare în React?
Așteptat de la candidat: Intervievatorul dorește să vă evalueze înțelegerea despre hook-uri și managementul ciclului de viață.
Exemplu de răspuns:
„Gestionez efectele secundare precum apelurile API sau manipulările DOM folosind useEffect „hook. Hook-ul îmi permite să specific dependențe, asigurându-mă că efectul rulează numai atunci când aceste dependențe se schimbă. Acest lucru ajută la menținerea unui comportament previzibil și la evitarea buclelor infinite.”
6) Povestește-mi despre o eroare dificilă cu care te-ai confruntat într-un proiect React și cum ai rezolvat-o.
Așteptat de la candidat: Intervievatorul dorește să vă evalueze abilitățile de rezolvare a problemelor și de depanare.
Exemplu de răspuns:
„Într-o poziție anterioară, am întâlnit o eroare în care actualizările de stare nu se reflectau în interfața cu utilizatorul. După investigare, mi-am dat seama că problema era cauzată de mutarea directă a obiectului de stare în loc de crearea unei copii noi. Am refactorizat codul pentru a utiliza actualizări imuabile, ceea ce a rezolvat problema și a îmbunătățit consistența datelor.”
7) Cum gestionați validarea formularelor în aplicațiile React?
Așteptat de la candidat: Intervievatorul vrea să vadă dacă înțelegi cum să implementezi validarea datelor introduse de utilizator.
Exemplu de răspuns:
„De obicei, utilizez componente controlate pentru gestionarea intrărilor din formulare, combinate cu biblioteci precum Formik sau React Hook Form pentru validare. Aceste instrumente simplifică gestionarea erorilor, gestionarea stării formularului și integrarea cu biblioteci de validare terțe, cum ar fi Yup.”
8) Descrie o situație în care a trebuit să colaborezi cu dezvoltatori backend în timp ce lucrai la un proiect React.
Așteptat de la candidat: Intervievatorul dorește să vă evalueze abilitățile de lucru în echipă și de comunicare.
Exemplu de răspuns:
„În ultimul meu rol, am colaborat îndeaproape cu dezvoltatorii backend pentru a proiecta API-uri REST pentru o aplicație de tip dashboard. Am convenit asupra formatelor de date și a endpoint-urilor în primele etape de dezvoltare. De asemenea, am creat răspunsuri mock pentru a continua dezvoltarea front-end în timp ce backend-ul era construit, asigurând o integrare ulterioară fără probleme.”
9) Cum vă asigurați că componentele React sunt reutilizabile și ușor de întreținut?
Așteptat de la candidat: Intervievatorul vrea să știe despre abordarea ta în ceea ce privește proiectarea componentelor și scalabilitatea.
Exemplu de răspuns:
„Urmez principiul construirii de componente mici, concentrate, care gestionează o singură responsabilitate. De asemenea, utilizez elemente de recuzită pentru flexibilitate și păstrez stilizarea modulară cu CSS-in-JS sau componente stilizate. Acest lucru asigură că componentele pot fi reutilizate și întreținute cu ușurință pe parcursul proiectului.”
10) Cum te menții la curent cu tendințele și cele mai bune practici React.js?
Așteptat de la candidat: Intervievatorul dorește să evalueze angajamentul tău față de învățarea continuă.
Exemplu de răspuns:
„Mă mențin la curent urmărind documentația oficială React și blogurile comunității. De asemenea, urmăresc prezentări de la conferințe React, cum ar fi React Conf, și ascult podcasturi precum «React Podcast». Aceste resurse mă ajută să fiu informat despre noile funcții, cum ar fi randarea concurentă și componentele serverului.”
