40 najboljih pitanja i odgovora za intervju za React JS (2026.)

Pripremate se za intervju za React JS? Vrijeme je da istražite što vas čeka. Razumijevanje Pitanja za intervju za React JS pomaže u otkrivanju vaše konceptualne jasnoće i snaga u implementaciji u stvarnom svijetu.

React JS nudi ogromne mogućnosti karijere za profesionalce s tehničkim iskustvom i stručnošću u određenoj domeni. Bez obzira jeste li student prve ili završne godine s 5 ili 10 godina profesionalnog iskustva, vještine analiziranja i tehnička stručnost su važne. Ova pitanja i odgovori pomažu voditeljima timova, menadžerima i programerima da usavrše svoje vještine i prođu najbolje intervjue.

Na temelju uvida više od 85 stručnjaka, uključujući voditelje zapošljavanja i tehničke voditelje, ova kompilacija odražava različita očekivanja industrije i stvarne obrasce intervjua prikupljene od radnih timova u različitim područjima.

Najčešća pitanja i odgovori za intervju za React JS

1) Objasnite virtualni DOM i kako usklađivanje funkcionira u Reactu.

Odgovor:

Virtualni DOM je memorijski prikaz korisničkog sučelja koji React održava kako bi učinkovito izračunao promjene korisničkog sučelja. Kada se stanje ili svojstva promijene, React renderira novo stablo virtualnog DOM-a, a zatim pokreće razlikovanje algoritam u odnosu na prethodno stablo kako bi se otkrio minimalni skup potrebnih stvarnih DOM operacija. Ovaj proces, nazvan izmirenje, minimizira preklapanje izgleda i skupe promjene rasporeda u pregledniku. React dodjeljuje Tipke elementima u popisima kako bi mu pomogao u usklađivanju čvorova tijekom renderiranja, a koristi i heuristike (poput usporedbe tipova i ključeva) kako bi odlučio hoće li ažurirati, promijeniti redoslijed ili ukloniti čvorove. Prednosti uključuju predvidljiva ažuriranja, manju površinu za greške i bolje performanse u složenim korisničkim sučeljima.

Primjer:

Iskazivanje dinamičkog popisa poruka u chatu: korištenjem stablea key vrijednosti (ID-ovi poruka), samo se nove poruke dodaju DOM-u dok postojeći čvorovi ostaju netaknuti, čime se izbjegavaju nepotrebna ponovna renderiranja.

👉 Besplatno preuzimanje PDF-a: Pitanja i odgovori za intervju za React JS

---

2) Koje su različite vrste životnih ciklusa komponenti u Reactu i kako se Hookovi mapiraju na njih?

Odgovor:

React komponente prolaze kroz faze montiranja, ažuriranja i demontiranja. U komponentama klase, metode životnog ciklusa kao što su componentDidMount, shouldComponentUpdate, componentDidUpdatei componentWillUnmount upravljaju nuspojavama, odlukama o renderiranju i čišćenjem. U funkcijskim komponentama, kuke pružaju ekvivalentne mogućnosti: useEffect obrađuje efekte nakon renderiranja; funkcije čišćenja unutra useEffect izvodi se pri odmontiranju ili prije sljedećeg efekta; useMemo i useCallback kontrolirati memoizaciju; i useRef zadržava promjenjive reference kroz renderiranje. Prednosti Hookova uključuju kompozibilnost, manje problema s "this" vezanjem i lakšu ponovnu upotrebu logike putem prilagođenih hookova, dok je glavni nedostatak potreba za učenjem pravila Hookova i upravljanja ovisnostima.

Odgovorite s primjerima:

• Učinak montaže: useEffect(() => fetchData(), []).
• Čišćenje prilikom odspajanja: useEffect(() => { start(); return stop; }, []).

---

3) Kako se odlučujete između renderiranja na strani klijenta (CSR), renderiranja na strani poslužitelja (SSR), generiranja statičke stranice (SSG) i inkrementalne statičke regeneracije (ISR) za React aplikaciju?

Odgovor:

Strategija renderiranja trebala bi biti vođena zahtjevima korisničkog iskustva, svježinom podataka, SEO potrebama, ograničenjima infrastrukture i brzinom razvoja. DOP odgovara visoko interaktivnim aplikacijama iza autentifikacije gdje je SEO sekundarni. SSR pruža prvo iscrtavanje sa stvarnim podacima za javne stranice, poboljšavajući vrijeme do prvog bajta i SEO, ali uz veće troškove poslužitelja. SSG unaprijed izračunava stranice tijekom izrade za izvrsnu brzinu i predmemoriranje kada se podaci rijetko mijenjaju. ISR ažurira statičke stranice postupno na zahtjev, nudeći ravnotežu svježine i performansi. Čimbenici uključuju mogućnost predmemoriranja, personalizaciju, latenciju za globalnu publiku i operativnu složenost.

Tablica: Prednosti u odnosu na nedostatke

Pristup	Prednosti	Nedostaci
DOP	Jednostavan hosting, bogata interaktivnost	Sporije prvo iscrtavanje, slabiji SEO
SSR	Odličan SEO, svježi podaci pri prvom učitavanju	Veće opterećenje servera, složenost
SSG	Brzo, jeftino, prilagođeno CDN-u	Zastarjeli sadržaj do ponovne izrade
ISR	Brzo s kontroliranom svježinom	Više pokretnih dijelova za upravljanje

---

4) Koju strategiju upravljanja stanjem treba koristiti: lokalno stanje, kontekst, Redux ili biblioteke upita?

Odgovor:

Odaberite najjednostavniji alat koji obrađuje karakteristike problema. Stanje komponente lokalno putem useState or useReducer idealan je za izolirane probleme s korisničkim sučeljem. Kontekst Radi uglavnom za vrijednosti za čitanje, koje se odnose na cijelu aplikaciju (tema, lokalizacija, trenutni korisnik), ali nije optimiziran za ažuriranja visoke učestalosti na velikim stablima. Redux ili slične pohrane temeljene na događajima izvrsne su kada vam je potrebna predvidljivost, otklanjanje pogrešaka u vremenu, middleware i strogi jednosmjerni tokovi podataka. Biblioteke za dohvaćanje podataka (na primjer, obrasci u stilu React Queryja) upravljaju životnim ciklusima stanja poslužitelja - predmemoriranjem, uklanjanjem duplikata, strategijama ponovnog dohvaćanja i sinkronizacijom - smanjujući standardne standarde. Pragmatična arhitektura često koristi lokalno stanje + kontekst za konfiguraciju + biblioteka stanja poslužitelja, rezervirajući Redux za složene tijekove rada.

Primjer:

Nadzorna ploča koristi React Query za API keširanje, Context za temu i useReducer unutar složenih widgeta za lokalnu obradu događaja.

---

5) Koja je razlika između useEffect i useLayoutEffect i kada se svaki od njih primjenjuje?

Odgovor:

useEffect pokreće se nakon što preglednik završi s iscrtavanjem, što ga čini prikladnim za zadatke koji ne blokiraju, kao što su dohvaćanje podataka, pretplate i bilježenje. useLayoutEffect izvršava sinkrono nakon DOM mutacija, ali prije bojenja, što omogućuje mjerenje i prilagodbe rasporeda koje se moraju odvijati bez treperenja (na primjer, očitavanje veličina elemenata i sinkrona ponovna primjena stilova). Nedostatak useLayoutEffect jest da može blokirati slikanje i naštetiti odzivu ako se prekomjerno koristi. Dobro je pravilo započeti s useEffect za nuspojave i posegnite za useLayoutEffect samo kada morate izmjeriti ili sinkrono mutirati raspored kako biste osigurali vizualnu ispravnost.

Odgovorite s primjerima:

• useEffect: dohvati korisnički profil nakon renderiranja.
• useLayoutEffect: izmjerite veličinu opisa alata kako biste ga pozicionirali prije bojanja.

Brza usporedba

svojstvo	useEffect	useLayoutEffect
Termin	Nakon boje	Prije bojanja
Upotrijebite slučaj	Podaci, pretplate	Mjerenja, sinkroni popravci rasporeda
Rizik	Manji trzaj ako je jak	Blokira boju ako je teška

---

6) Objasnite kako ključevi funkcioniraju u listama i zamke korištenja indeksa nizova.

Odgovor:

Ključevi omogućuju Reactovom usklađivanju da točno identificira stavke popisa između renderiranja. Stabilni, jedinstveni ključevi omogućuju Reactu promjenu redoslijeda, umetanje ili uklanjanje stavki uz minimalnu promjenu DOM-a. Korištenje indeksi polja Upotreba ključeva je problematična kada se stavke mogu preuređivati, umetati ili brisati jer React može povezati prethodno stanje s pogrešnim elementom, uzrokujući suptilne greške (na primjer, netočne ulazne vrijednosti ili animacije). Najbolja praksa je korištenje nepromjenjivog identifikatora specifičnog za domenu, kao što je ID baze podataka. Ako je popis zaista statičan i nikada se ne preuređiva, indeksi su prihvatljivi, ali ovo je iznimka, a ne pravilo.

Primjer:

Kanban ploča koja se može povlačiti trebala bi koristiti ID-ove kartica, a ne indekse, kako bi se sačuvao identitet komponenti tijekom povlačenja i ispuštanja.

---

7) Gdje se tehnike memoizacije primjenjuju u Reactu i koje su njihove prednosti i nedostaci?

Odgovor:

Memoizacija smanjuje nepotrebna izračunavanja i ponovno renderiranje ponovnom upotrebom prethodnih rezultata kada se unosi nisu promijenili. U Reactu, React.memo kešira izlaz komponenti, useMemo kešira skupe izračune i useCallback Memorira identitete funkcija proslijeđene djeci. Glavne prednosti su stabilnost performansi i smanjena upotreba CPU-a pri intenzivnoj interakciji. Nedostaci uključuju složenost, potencijalne greške zastarjele predmemorije ako su ovisnosti pogrešne i memorijsko opterećenje.

Tablica: Različiti načini pamćenja

Tip	Svrha	Tipični čimbenici koje treba uzeti u obzir
React.memo(Component)	Preskoči ponovno renderiranje ako su propsi shallow-equal	Volatilnost propiona, trošak djeteta
useMemo(fn, deps)	Vrijednosti izračunate iz predmemorije	Cijena računanja u odnosu na memoriju
useCallback(fn, deps)	Identitet stabilne funkcije	Ispravnost ovisnosti

Odgovorite s primjerima:

Memoizirajte filtrirani, sortirani skup podataka za mrežu pomoću useMemoi omotajte komponente renderera ćelija s React.memo kako bi se izbjeglo ponovno renderiranje oluja.

---

8) Preferirate li kontrolirane ili nekontrolirane komponente za obrasce? Raspravite o prednostima, nedostacima i vrstama stanja obrasca.

Odgovor:

Kontrolirane komponente vezanje ulaza na React stanje putem value i onChange, što omogućuje validaciju, maskiranje i uvjetno korisničko sučelje izvedeno iz jednog izvora istine. Prednosti su predvidljivost i jednostavna integracija s drugim stanjima; nedostaci uključuju troškove ponovnog renderiranja pri svakom pritisku tipke bez optimizacije. Nekontrolirane komponente oslanjaju se na DOM kao izvor istine korištenjem referenci, nudeći niže opterećenje i jednostavnije povezivanje za osnovne obrasce, ali manje centraliziranu validaciju. Za složene tijekove rada uobičajen je hibridni uzorak, koji koristi kontrolirane ulaze za kritična polja i nekontrolirane za velika područja s puno teksta.

Primjer:

Obrazac za prijavu koristi kontrolirana polja za provjeru e-pošte i lozinke, dok je tekstualno područje za bilješke nekontrolirano kako bi se smanjilo opterećenje ponovnog renderiranja.

---

9) Kada biste koristili kontekst u odnosu na prilagođenu udicu i koja je konceptualna razlika između njih?

Odgovor:

Kontekst je transportni mehanizam za vrijednosti koje su potrebne mnogim komponentama, izbjegavajući bušenje prop-a. Ne upravlja stanjem samostalno; jednostavno ga izlaže potomcima. A prilagođena kuka enkapsulira logiku za višekratnu upotrebu - kombinirajući stanje, efekte i vanjske usluge - vraćajući vrijednosti i funkcije. Koristite kontekst za pružanje dijeljene konfiguracije za čitanje ili za izlaganje trgovine te koristite prilagođene kuke za implementaciju ponašanja trgovine ili za orkestriranje problema kao što su autentifikacija, zastavice značajki ili pravila dohvaćanja podataka. To dvoje se nadopunjuje: uobičajeni obrazac je useAuth() kao prilagođena kuka potkrijepljena AuthContext.

Odgovorite s primjerima:

AuthProvider dostavlja korisnika i tokene putem konteksta; useAuth obrađuje nuspojave prijave, osvježavanja i odjave.

---

10) Možete li navesti strategije podešavanja performansi za velike React aplikacije, uključujući karakteristike sporih renderiranja i vrućih točaka životnog ciklusa?

Odgovor:

Podešavanje performansi započinje mjerenjem. Identificirajte spore putanje pomoću React DevTools Profilera i panela performansi preglednika kako biste locirali žarišta usklađivanja i skupe commit-ove. Taktike uključuju državna lokacija (držati državu blizu svojih potrošača), memoizacija (React.memo, useMemo, useCallback), virtualizacija popisa za duge popise, dijeljenje koda s lijenim učitavanjem kako bi se smanjio početni paket i odbijanje ili gušenje događaji visoke učestalosti. Za podatke podržane od strane poslužitelja, usvojite predmemoriranje s bibliotekom upita i iskoristite napeto obrasce za glatkije učitavanje. Pripazite na vruće točke životnog ciklusa kao što su efekti koji se prečesto izvode zbog širokih nizova ovisnosti ili komponente koje se ponovno renderiraju zbog često promjenjivih vrijednosti konteksta.

Odgovorite s primjerima:

Virtualizirajte tablicu od 10 000 redaka pomoću biblioteke za rad s prozorima; odgođeno učitavanje teških grafikona iza podjele koda temeljene na rutama radi poboljšanja početnog ispisa.

---

11) Koja je razlika između propsa i stanja u Reactu?

Odgovor:

Oboje props i state utječu na način prikaza komponenti, ali njihova svrha i životni ciklus se temeljno razlikuju. rekviziti (skraćeno od svojstva) su nepromjenjivi ulazi koji se prenose s roditeljske na podređenu komponentu, definirajući konfiguraciju ili podatke za renderiranje. Oni teku silazni u Reactovom jednosmjernom toku podataka i nikada ga ne bi smjela mijenjati prijemna komponenta. DržavaS druge strane, je promjenjiv i održava se interno od strane komponente. Određuje dinamičko ponašanje koje se mijenja tijekom vremena, kao što su vrijednosti unosa u obrazac ili promjenjiva vidljivost.

Tablica ključnih razlika:

Faktor	rekviziti	Država
Promjenjivost	nepromjenljiv	promjenljiv
Svojina	Prošao roditelj	U vlasništvu komponente
Metoda ažuriranja	Nadređeni ponovno renderira	useState or setState
Koristite slučaj	konfiguracija	Dinamičke promjene korisničkog sučelja
Životni ciklus	Postoji tijekom renderiranja	Traje, pokreće ponovno renderiranje

Primjer:

A <Button color="blue" /> koristi rekvizite za određivanje boje, dok clicked boolean u svom stanju prebacuje vizualnu povratnu informaciju.

---

12) Objasnite obrazac arhitekture komponenti u Reactu i različite načine klasifikacije komponenti.

Odgovor:

React aplikacije slijede arhitektura temeljena na komponentama, razbijanjem korisničkog sučelja u male, ponovno korištene gradivne blokove. Komponente se mogu kategorizirati prema njihovim svrha i Odgovornost:

1. Prezentacijske (glupe) komponente – Fokus na korisničko sučelje, primanje podataka putem propsova i rijetko upravljanje stanjem.
2. Komponente kontejnera (pametne) – Obrađuju logiku, dohvaćaju podatke i upravljaju stanjem; prikazuju prezentacijske komponente.
3. Komponente višeg reda (HOC) – Funkcije koje uzimaju komponentu i vraćaju poboljšanu verziju s dodatnim ponašanjem.
4. Čiste komponente – Optimizirajte performanse plitkom usporedbom propsa i stanja.
5. Funkcionalne vs. klasne komponente – Funkcionalne komponente (s hookovima) sada su poželjnije zbog čitljivosti i performansi.

Primjer:

A <UserProfile /> komponenta može biti prezentacijska, primati korisničke informacije, dok <UserProfileContainer /> dohvaća podatke i upravlja njihovim životnim ciklusom.

---

13) Kako React rješava granice pogrešaka i zašto su one važne?

Odgovor:

Granice pogrešaka su posebne React komponente koje hvataju JavaPogreške skripte bilo gdje u stablu njihovih podkomponenti tijekom renderiranja, metoda životnog ciklusa ili konstruktora. Sprječavaju potpuna rušenja aplikacije izoliranjem kvarova na određena podstabla. Možete implementirati jedno pomoću componentDidCatch(error, info) i static getDerivedStateFromError() u komponenti klase.

Prednosti:

• Očuvajte stabilnost korisničkog sučelja prikazivanjem rezervnih korisničkih sučelja.
• Zabilježite i evidentirajte pogreške za analitiku.
• Spriječite kaskadno odspajanje.

Primjer:

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) Što su React fragmenti i kako se razlikuju od wrappera elementi?

Odgovor:

Reagovati fragmenti (<></>) omogućuju vam grupiranje više elemenata bez dodavanja dodatnih čvorova u DOM. To je bitno za čistiju strukturu, posebno u popisima, tablicama i semantičkom HTML-u gdje dodatni omotači mogu uzrokovati probleme s rasporedom ili pristupačnošću. Za razliku od omotača <div>Fragmenti se ne prikazuju u DOM-u i stoga imaju prednosti u performansama i semantici.

Primjer:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Tablica razlika:

Faktor	fragment	<div> Omot
Izlaz DOM-a	nijedan	Dodaje dodatni čvor
Koristite slučaj	Strukturno grupiranje	Stilizacija ili izgled
Izvođenje	Bolje	Lagani nadzemni dio

---

15) Koji React Hook biste koristili za optimizaciju performansi i zašto?

Odgovor:

React komponente osjetljive na performanse često se oslanjaju na kuke za memoizaciju i lijeno učitavanje kako bi se smanjio suvišan rad. Uobičajene udice uključuju:

• useMemo → Sprema računalno skupe rezultate u predmemoriju.
• useCallback → Sprječava nepotrebna renderiranja djece zbog promjena identiteta funkcije.
• useTransition → Odgađa ažuriranja koja nisu hitna radi glatkijeg korisničkog sučelja.
• useDeferredValue → Odgađa teške izračune do nakon neposrednih interakcija.

Primjer:

Velika podatkovna mreža koja koristi useMemo za filtrirane rezultate može smanjiti potrošnju CPU-a za 50% ili više.

Prednosti:

• Smanjuje nepotrebne rendere.
• Održava korisničko sučelje responzivnim pod opterećenjem.

Hendikep:

• Zahtijeva preciznost ovisnosti; ako se njima nepravilno upravlja, mogu se pojaviti greške u zastarjeloj predmemoriji.

---

16) Što su React portali i koje su njihove prednosti?

Odgovor:

portali dopušta React komponentama da renderiraju djecu u DOM čvor izvan njihove roditeljske hijerarhije, obično za modale, opise alata ili padajuće izbornike koji moraju vizualno "izbjeći" kontekste prelijevanja ili slaganja. Implementirano pomoću ReactDOM.createPortal(child, container), održavaju konzistentnost mjehurića događaja, pa rukovatelji događajima rade kao da je element ostao unutar svoje izvorne hijerarhije.

Tablica prednosti:

Prednost	Description
Strukturna neovisnost	Renderiraj izvan roditeljskog stabla
CSS/Kontrola slaganja	Izbjeći overflow: hidden ili problemi s z-indexom
Širenje događaja	Reactovi sintetički događaji i dalje se ispravno prikazuju u mjehurićima
Reus Sposobnost	Idealno za globalne slojeve

Primjer:

createPortal(<ModalContent />, document.getElementById('modal-root'));

---

17) Objasnite kako React Router upravlja navigacijom i stanjem između stranica.

Odgovor:

React Router je deklarativna biblioteka za usmjeravanje koja sinkronizira korisničko sučelje s URL-om preglednika. Koristi API za povijest manipulirati poviješću sesije bez ponovnog učitavanja cijele stranice. Osnovni koncepti uključuju Rute, linkovii Outlet za ugniježđeno usmjeravanje. Biblioteka podržava dinamičke rute, URL parametrii navigacijske kuke (useNavigate, useParams, useLocation). React Router v6 uveo je pojednostavljenu sintaksu i podatkovne API-je za utovarivač i akcijski funkcije, poboljšanje integracije SSR-a i upravljanja državom.

Primjer:

<Route path="/user/:id" element={<UserProfile />} />

Prednosti:

• Omogućuje navigaciju po jednoj stranici.
• Održava položaj i povijest pomicanja.
• Čisto se integrira s lijenim učitavanjem za bolje performanse.

---

18) Koji su različiti načini rješavanja nuspojava u React aplikacijama?

Odgovor:

Nuspojave se odnose na radnje koje utječu na nešto izvan opsega komponente (API pozivi, manipulacija DOM-om, pretplate). Glavni alati uključuju:

1. useEffect za efekte na strani klijenta nakon renderiranja.
2. Voditelji događaja za efekte koje pokreću korisnici.
3. Kuke po narudžbi ponovno upotrijebiti logiku efekata (na primjer useFetch).
4. middleware (poput Redux Sage ili Thunka) za složenu asinkronu orkestraciju.
5. React Query ili SWR za automatsko upravljanje stanjem poslužitelja i životnim ciklusima ponovnog učitavanja.

Primjer:

A useEffect dohvaća podatke jednom prilikom montiranja:

useEffect(() => { fetchData(); }, []);

Prednosti:

Pojednostavljeno upravljanje asinkronošću, bolja enkapsulacija i jasnija kontrola životnog ciklusa.

---

19) Je li React framework ili biblioteka? Raspravite o čimbenicima koji definiraju razliku.

Odgovor:

React je službeno knjižnica, nije potpuni okvir. Usredotočuje se isključivo na sloj prikaza, pružajući apstrakcije renderiranja, stanja i komponenti bez prisiljavanja usmjeravanja, dohvaćanja podataka ili strukture izgradnje.

Usporedna tablica:

Faktor	Biblioteka (React)	Okvir (Angular, Vue)
Djelokrug	Prikaz renderiranja	Potpuna MVC arhitektura
Samouvjeren	Nizak	visok
kontrola	Vođeno razvojnim programerima	Vođeno okvirom
Fleksibilnost	visok	Ograničeno konvencijama
Krivulja ucenja	Umjereno	Veći zbog složenosti

React-ov ekosustav (Redux, Router, Query, Next.js) učinkovito tvori „meta-okvir“, nudeći modularnu kompozibilnost koja omogućuje programerima da izgrade vlastitu arhitekturu.

---

20) Kada biste trebali koristiti React.lazy i Suspense i koje su njihove prednosti?

Odgovor:

React.lazy omogućuje dijeljenje koda dinamičkim učitavanjem komponenti samo kada je to potrebno, dok Suspense pruža rezervno korisničko sučelje dok komponenta ne bude spremna. Ova kombinacija poboljšava početne performanse učitavanja i korisnički percipiranu brzinu odziva.

Primjer:

const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
  <Chart />
</Suspense>

Tablica prednosti:

Prednost	Objašnjenje
Izvođenje	Učitava kod na zahtjev
Korisničko iskustvo	Elegantno učitavanje rezervnog sustava
Veličina paketa	Manji početni paket
Jednostavnost	Native React API, minimalno podešavanje

Najbolje prakse:

• Omotajte više lijenih komponenti u jednu granicu Suspense-a.
• Koristite smislene rezervne pokazatelje za pristupačnost.

---

21) Objasnite što su React Server Components (RSC) i koje su njihove prednosti.

Odgovor:

Komponente React Servera (RSC) su glavna inovacija uvedena kako bi se poboljšale performanse i iskustvo programera omogućujući komponentama da renderiraju na poslužitelju bez slanja svojih JavaSkripta za klijentaIzvršavaju se u potpunosti na poslužitelju, dohvaćajući podatke, čitajući iz baza podataka ili sigurno izvodeći I/O operacije prije nego što struje serijalizirani izlaz klijentu.

Prednosti:

• Manja veličina paketa — Nema klijentskog JS-a za logiku samo za poslužitelj.
• Poboljšana izvedba — Dohvaćanje podataka sa strane poslužitelja smanjuje vodopade.
• Sigurnost — Osjetljivi kod nikada ne dolazi do preglednika.
• Bolje predmemoriranje — Komponente poslužitelja se mogu predmemorirati na rubu mreže.

Primjer:

A <ProductList /> Poslužiteljska komponenta može izravno dohvatiti podatke iz baze podataka i proslijediti rezultate <ProductCard /> klijentska komponenta.

---

22) Koja je razlika između React hidratacije i pomirenja?

Odgovor:

Iako oba termina uključuju ažuriranje korisničkog sučelja putem Reacta, njihova svrha se razlikuje:

• izmirenje je proces usporedbe virtualnog DOM stabla s njegovom prethodnom verzijom kako bi se odredio minimalni skup DOM ažuriranja.
• Hidratacija, s druge strane, je proces povezivanja Reactovih slušača događaja i internih struktura s HTML prikazan na poslužitelju na strani klijenta, pretvarajući statičko označavanje u potpuno interaktivnu aplikaciju.

Usporedna tablica:

Faktor	izmirenje	Hidratacija
Okidač	Klijent ponovno renderira	Početno učitavanje stranice (SSR)
Svrha	Učinkovito ažurirajte DOM	Učinite SSR HTML interaktivnim
Djelokrug	Virtualno DOM razlikovanje	Povezivanje događaja + ponovno povezivanje stanja
Frekvencija	Više puta	Nakon SSR renderiranja

Primjer:

Nakon što Next.js aplikacija pošalje unaprijed renderirani HTML, React hidratima tako da komponente reagiraju na događaje bez ponovnog renderiranja svega.

---

23) Kako istodobno renderiranje poboljšava korisničko iskustvo u Reactu 18+?

Odgovor:

Istovremeno renderiranje omogućuje Reactu prekid, pauziranje ili nastavak renderiranja na temelju prioriteta korisnika. To sprječava zamrzavanje korisničkog sučelja tijekom zahtjevnih izračuna ili ponovnog renderiranja. Značajke kao što su useTransition i useDeferredValue iskoristite ovu sposobnost za odvajanje hitna ažuriranja (kao tipkanje) iz nije hitno one (poput filtriranja).

Prednosti:

• Glatke, responzivne interakcije.
• Vremensko rezanje kako bi se spriječilo blokiranje glavne niti.
• Predvidljivo određivanje prioriteta za bolje korisničko iskustvo.

Primjer:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredList(filter(items, term)));

Ovdje tipkanje ostaje fluidno čak i pri filtriranju velikih skupova podataka jer React istovremeno zakazuje ažuriranja koja nisu hitna.

---

24) Koji su različiti načini testiranja u React aplikacijama?

Odgovor:

React testiranje se može podijeliti na jedinica, integracijai kraj na kraj razinama.

Tablica metoda ispitivanja:

Tip	Oruđe	Svrha
Jedinica	ima	Testiranje izoliranih funkcija/komponenti
Integracija	Biblioteka za reakcijsko testiranje	Testiranje interakcija korisničkog sučelja i promjena stanja
E2E	Cypress / Dramski pisac	Testiranje korisničkih tokova u stvarnim preglednicima

Najbolje prakse:

• preferiraju Biblioteka za reakcijsko testiranje preko enzima (modernog, DOM-orijentiranog).
• Simuliranje API-ja pomoću msw (Lažni uslužni radnik).
• Izbjegavajte testiranje detalja implementacije - usredotočite se na ponašanje.

Primjer:

test('renders user name', () => {
  render(<User name="Alice" />);
  expect(screen.getByText(/Alice/)).toBeInTheDocument();
});

---

25) Koji se alati za izgradnju i paketi najčešće koriste s Reactom i koje su njihove razlike?

Odgovor:

React se može integrirati s nekoliko bundlera i kompajlera, od kojih je svaki optimiziran za različite slučajeve upotrebe.

Usporedna tablica:

Oruđe	Karakteristike	Prednosti	Nedostaci
webpack	Visoko konfigurabilan	Zrelo, bogato dodacima	Složena postavka
vijak	ESM-bazirani, munjevito brzi razvojni poslužitelj	Instant HMR, moderna sintaksa	Ograničena podrška za starije dodatke
Parcela	Zero-config	Auto-optimizacija	Less fleksibilan
esbuild	Go kompajler	Izuzetno brzo	Manje dodataka ekosustava

Primjer:

Moderni projekti često usvajaju vijak za brzinu razvoja i esbuild u CI/CD cjevovodima za učinkovite produkcijske izgradnje.

---

26) Kako Next.js proširuje Reactove mogućnosti?

Odgovor:

Next.js je React framework pružajući promišljenu arhitekturu za usmjeravanje, SSR i generiranje statičkih podataka. Uvodi hibridne modele renderiranja, API rute i značajke implementacije spremne za rubne mreže.

Prednosti:

• Ugrađen SSR/SSG/ISR Podrška.
• Usmjerivač aplikacija s komponentama React Servera.
• Optimizacija slike i middleware za performanse i sigurnost.
• Jednostavne API rute za funkcije bez servera.

Primjer:

app/page.js za stranice prikazane SSR-om; app/api/route.js za krajnje točke poslužitelja.

U sažetkuNext.js omogućuje React aplikacije produkcijske razine s minimalnom konfiguracijom.

---

27) Koje su neke uobičajene zamke performansi u Reactu i kako ih možete izbjeći?

Odgovor:

Uobičajene zamke performansi Reacta uključuju:

1. Nepotrebna ponovna renderiranja — Popravak pomoću React.memo ili cijepanje komponenti.
2. Stvaranje inline objekta/niza - Koristiti useMemo za stabilne reference.
3. Velike liste — Implementirajte prozore (react-window, react-virtualized).
4. Teški izračuni — Memoiziraj ili prebaci web radnike.
5. Prekomjerna upotreba konteksta — Česta ažuriranja se duboko šire; preferira se izvedeno stanje.

Primjer:

Ako prođeš { a: 1 } U liniji s memoiziranom komponentom, ona se ponovno renderira pri svakom roditeljskom renderiranju. Ispravite memoiziranjem objekta.

Tablica savjeta za performanse:

Izdanje	Tehnika optimizacije
Ponovno renderira	React.memo, useCallback
Skupi izračuni	useMemo, Web radnici
Veliki skupovi podataka	Virtualizacija
Česta ažuriranja konteksta	Lokaliziraj stanje

---

28) Objasnite razliku između useReducer i useState.

Odgovor:

Oba kuka upravljaju stanjem, ali se razlikuju po složenosti i kontroli.

• useState idealan je za jednostavne, izolirane prijelaze stanja.
• useReducer centralizira složenu logiku stanja u funkcija reduktora, Korištenje dispatch radnje za predvidljiva ažuriranja.

Usporedna tablica:

Faktor	useState	useReductor
Sintaksa	[value, setValue]	[state, dispatch]
Složenost	Jednostavan	Umjereno do složeno
Koristite slučaj	Neovisne države	Povezana ili ugniježđena stanja
Otklanjanje grešaka	Less glagolan	Lakše putem zabilježenih radnji
Primjer	Prekidači obrasca	Validacija obrasca ili obrasci u više koraka

Primjer:

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

---

29) Kako možete poboljšati pristupačnost (a11y) u React aplikacijama?

Odgovor:

Pristupačnost osigurava da svi korisnici, uključujući i one s invaliditetom, mogu učinkovito koristiti vašu aplikaciju. React olakšava pristupnost putem semantičkog označavanja i ARIA atributa.

Najbolje prakse:

• Koristiti semantički HTML (<button> vs <div onClick>).
• Upravljajte fokusom pomoću ref i tabIndex.
• Koristite ARIA uloge za dinamičke komponente.
• Osigurajte kontrast boja i alternativne tekstualne opcije za slike.
• Iskoristite alate poput eslint-plugin-jsx-a11y i sjekira-jezgra za revizije.

Primjer:

<button aria-label="Close dialog" onClick={closeModal}>×</button>

Prednosti:

• Širi doseg publike.
• Poboljšanje SEO-a.
• Usklađenost sa WCAG standardima.

---

30) Možete li opisati kako se dijeljenje koda i lijeganje učitavanja razlikuju i kada ih koristiti?

Odgovor:

Obje tehnike optimiziraju veličinu snopa i performanse učitavanja, ali se razlikuju u vrijeme izvršenja.

• Razdvajanje koda dijeli velike pakete na manje dijelove koji se mogu učitati neovisno.
• Lijeno učitavanje odgađa učitavanje tih dijelova dok ne budu potrebni.

Usporedna tablica:

Faktor	Podjela koda	Lazy Otvaram
Definicija	Dijeli kod na dijelove	Učitava dijelove na zahtjev
Oruđe	Webpack, Vite	React.lazy, dinamičan import()
Svrha	Optimizirajte veličinu paketa	Poboljšajte performanse za vrijeme izvođenja
Izvršenje	Vrijeme izgradnje	dužina trajanja

Primjer:

const Settings = React.lazy(() => import('./Settings'));

Korištene zajedno, ove tehnike smanjuju vrijeme potrebno za interakciju i poboljšavaju percipiranu brzinu velikih aplikacija.

---

31) Objasnite koncept Render Propsa i kako se razlikuje od Higher-Order Components (HOC).

Odgovor:

Render Props je obrazac u Reactu gdje komponenta prihvaća funkcionirati kao rekvizit koji mu govori što treba prikazati. To omogućuje dijeljenje logike komponenti između više komponenti bez dupliciranja.

S druge strane, HOC-ovi omotati komponentu i vratiti poboljšanu verziju s ubrizganim propsima ili ponašanjima.

Usporedna tablica:

Faktor	Render Props	HOC
Izvršenje	Funkcionira kao dijete	Komponenta za omatanje funkcija
Sastav	Inline kontrola	Deklarativno prelamanje
čitljivost	Često jasnije	Može uzrokovati pakao od omotača
Koristite slučaj	Logika dinamičkog renderiranja	Međusektorski problemi

Primjer:

<DataProvider render={data => <UserList users={data} />} />

Render Props nude bolju fleksibilnost i izbjegavaju kolizije imena uobičajene u HOC-ovima.

---

32) Koje su različite vrste prilagođenih kuka i njihove prednosti?

Odgovor:

Prilagođene kuke obuhvaćaju logiku za višekratnu upotrebu koja kombinira stanje, nuspojave i uslužne programe. Poboljšavaju mogućnost ponovne upotrebe koda, odvajanje problema i mogućnost testiranja.

Vrste i primjeri:

1. Kuke za upravljanje stanjem - useToggle, useForm.
2. Kuke za dohvaćanje podataka - useFetch, useQuery.
3. UI/UX kuke - useWindowSize, useDarkMode.
4. Integracijske kuke - useLocalStorage, useMediaQuery.
5. Kuke za performanse - useDebounce, useThrottle.

Prednosti:

• Centralizirana ponovna upotreba logike.
• Čistije komponente.
• Neovisno testiranje.

Primjer:

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) Kako se nosite s curenjem memorije u React aplikacijama?

Odgovor:

Do curenja memorije dolazi kada nemontirane komponente još uvijek sadrže reference na resurse ili pretplate. To smanjuje performanse i uzrokuje nepredvidivo ponašanje.

Tehnike prevencije:

1. Efekti čišćenja in useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []);
2. Prekini asinhrone pozive koristeći AbortController.
3. Izbjegavajte zadržavanje zastarjelih zatvaranja referenciranje starih rekvizita/stanja.
4. Odjava s događaja ili utičnica pri demontiranju.
5. Koristite React Profiler za otkrivanje sporog rasta pamćenja.

Primjer:

U aplikaciji za chat uvijek isključite slušatelje utičnica kada korisnik napusti sobu za chat.

---

34) Koje su najbolje prakse za upravljanje obrascima u velikim React aplikacijama?

Odgovor:

Upravljanje obrascima u React aplikacijama na razini poduzeća zahtijeva ravnotežu između kontrole, performansi i održivosti.

Najbolje prakse:

• Koristite biblioteke poput Mravlja, React Hook obrazac, ili Konačni obrazac za validaciju i registraciju na terenu.
• Grupirajte povezana polja pomoću ugniježđenih komponenti ili konteksta.
• Korak po korak do prijave validacija sheme (Da, Zod) zbog dosljednosti.
• Uklonite teške validacije ili API provjere.
• Održavajte stanje obrasca lokaliziranim osim ako nije potrebno globalno.

Primjer:

React Hook Form minimizira ponovno renderiranje izoliranjem stanja ulaza.

const { register, handleSubmit } = useForm(); 
<input {...register('email', { required: true })} />

---

35) Koji su obrasci dizajna najkorisniji u React razvoju i koje su njihove karakteristike?

Odgovor:

React se prirodno uklapa u nekoliko obrazaca dizajna softvera za održivu i skalabilnu arhitekturu korisničkog sučelja.

Uzorak	Description	Primjer
Kontejner-prezenter	Odvojena logika (spremnik) od korisničkog sučelja (prezenter)	SpremnikPodataka → UIComponent
Kontrolirano-nekontrolirano	Upravljanje podacima obrasca putem stanja u odnosu na DOM	Formik u odnosu na sirove ulaze
Složene komponente	Roditeljski nadzor nad sastavom djeteta	<Tabs><Tab /></Tabs>
Uzorak pružatelja usluga	Dijeli stanje putem konteksta	Pružatelj tema
Uzorak kuka	Ponovno upotrijebite logiku stanja	useAuth, useFetch

Primjer:

A Tabs komponenta otkriva kontekst tako da <Tab> djeca se automatski registriraju - čista primjena Složena komponenta uzorak.

---

36) Koje su ključne razlike između Reacta 18 i Reacta 19?

Odgovor:

React 19 se nadovezuje na istovremene temelje Reacta 18 sa značajnim novim mogućnostima.

svojstvo	Reagiraj 18	Reagiraj 19
Istovremeno renderiranje	Predstavljen	Poboljšano s boljim suspensom
Komponente poslužitelja	Eksperimentalan	Stabilizirano i integrirano
API za akcije	Nije dostupno	Novi standard za rukovanje akcijama na obrascima
Učitavanje imovine	Priručnik	Automatsko učitavanje resursa
Poboljšano rukovanje greškama	osnovni	Granulirano s graničnim kukama

Ključne prednosti:

React 19 se fokusira na jednostavnije mutacije podataka, ugrađene akcije obrascai poboljšana kontrola asinkronosti, što SSR i progresivnu hidrataciju čini besprijekornijima.

---

37) Kako funkcionira mikrofrontend ArchiIntegrira li se tekstura s Reactom i koje su njezine prednosti?

Odgovor:

Mikro-frontendovi dijele veliku web aplikaciju na neovisne, implementabilne front-end module. U React ekosustavu, svaki mikro-frontend je samostalna aplikacija koja se može integrirati putem Federacija modula, iframeovi, ili prilagođeni učitavači za vrijeme izvođenja.

Prednosti:

• Neovisno postavljanje i skaliranje.
• Autonomija tima u različitim tehnološkim slojevima.
• Brža izgradnja cjevovoda.

Primjer:

Korištenje Webpack Module Federation, timovi mogu dinamički izložiti React komponente u aplikacijama:

exposes: { './NavBar': './src/NavBar' }

Nedostaci:

• Složenost upravljanja dijeljenim stanjem.
• Opterećenje performansi zbog izoliranih paketa.

---

38) Koje faktore uzimate u obzir za skaliranje React aplikacije u produkciji?

Odgovor:

Skaliranje React aplikacija uključuje tehnička, arhitektonska i operativna razmatranja.

Ključni čimbenici:

1. Struktura koda — usvojiti monorepozitorije (Nx/Turborepo) za modularno dijeljenje koda.
2. Upravljanje državom — segmentiranje lokalnih vs. globalnih vs. stanja poslužitelja.
3. Izvođenje — lijeno učitavanje, memoizacija, CDN keširanje.
4. Praćenje — koristite Sentry, Datadog ili LogRocket za pogreške i metrike.
5. Testiranje i CI/CD — automatizirani cjevovodi i vizualni regresijski testovi.

Primjer:

Velika platforma za e-trgovinu skalira React aplikacije koristeći Next.js za SSR, Redux Toolkit za predvidljivo stanje i mikro-frontendove za izolirane vertikale.

---

39) Kako testirate React komponente koje koriste asinhrono ponašanje?

Odgovor:

Testiranje asinkronih React komponenti zahtijeva sinkronizaciju između pokretača testa i ažuriranja stanja komponente.

Najbolje prakse:

• Koristiti waitFor or findBy* upiti u biblioteci za testiranje Reacta.
• Simulirajte pozive za dohvaćanje ili API-je pomoću msw.
• preferiraju lažni tajmeri (jest.useFakeTimers()) za efekte temeljene na isteku vremena.

Primjer:

test('loads and displays data', async () => {
  render(<UserList />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

To osigurava da test čeka Reactova asinkrona ažuriranja prije nego što izvrši tvrdnje.

---

40) Objasnite kako biste dizajnirali strukturu React projekta velikih razmjera koja se lako održava.

Odgovor:

Skalabilni React projekt mora uravnotežiti modularnost, jasnoću i timsku suradnju.

Preporučena struktura mapa:

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

Najbolje prakse:

• Koristite apsolutni uvoz s pseudonimima puta.
• Održavajte strogo stvaranje dlačica (ESLint + Prettier).
• Koristiti TypeScript za sigurnost tipova.
• Nametnite granice komponenti atomskim dizajnom ili rezanjem na temelju značajki.

Primjer:

U stvarnom okruženju, značajka "Korisnik" može uključivati UserSlice.js, UserAPI.js, UserCard.jsxi User.test.js, sve unutar src/features/user/.

---

🔍 Najpopularnija pitanja za intervju za React.js sa stvarnim scenarijima i strateškim odgovorima

1) Koje su ključne razlike između funkcionalnih i klasnih komponenti u React.js-u?

Očekivano od kandidata: Anketar želi provjeriti vaše razumijevanje arhitekture React komponenti i modernih najboljih praksi.

Primjer odgovora:

„Funkcionalne komponente su jednostavnije i oslanjaju se na hooks za upravljanje stanjem i metodama životnog ciklusa, dok komponente klase koriste this i metode životnog ciklusa poput componentDidMountFunkcionalne komponente su danas općenito poželjnije jer potiču čišći kod, lakše ih je testirati i bolje rade zbog optimizacija u Reactovom procesu renderiranja.

---

2) Možete li objasniti kako virtualni DOM radi u Reactu?

Očekivano od kandidata: Anketar želi procijeniti vaše razumijevanje Reactovog ključnog mehanizma performansi.

Primjer odgovora:

„Virtualni DOM je memorijski prikaz stvarnog DOM-a. Kada se stanje komponente promijeni, React prvo ažurira virtualni DOM, uspoređuje ga s prethodnom verzijom pomoću procesa koji se naziva 'diffing', a zatim ažurira samo dijelove stvarnog DOM-a koji su se promijenili. Ovaj pristup poboljšava performanse minimiziranjem izravne manipulacije DOM-om.“

---

3) Kako upravljate stanjem u velikoj React aplikaciji?

Očekivano od kandidata: Anketar želi znati o vašem iskustvu s tehnikama i alatima za upravljanje državom.

Primjer odgovora:

„U velikim aplikacijama obično koristim centralizirane biblioteke za upravljanje stanjem kao što su Redux ili Zustand. Redux pruža predvidljiv tok podataka i olakšava ispravljanje pogrešaka putem alata za ispravljanje pogrešaka tijekom putovanja vremenom. Za jednostavnije aplikacije preferiram korištenje Context API-ja i hookova kako bih izbjegao nepotrebnu složenost.“

---

4) Opišite situaciju kada ste optimizirali performanse Reacta.

Očekivano od kandidata: Anketar želi razumjeti vaše praktično iskustvo s optimizacijom učinka.

Primjer odgovora:

„U mojoj prethodnoj ulozi, naša se aplikacija pretjerano ponovno prikazivala zbog nepotrebnih promjena stanja. Koristio sam React.memo i useCallback kuku kako bi se spriječilo nepotrebno ponovno renderiranje. Također sam analizirao performanse pomoću React Profilera i identificirao komponente kojima je potrebna memorizacija, što je smanjilo vrijeme renderiranja za gotovo 30%.

---

5) Kako se nosite s nuspojavama u Reactu?

Očekivano od kandidata: Anketar želi procijeniti vaše razumijevanje kukica i upravljanja životnim ciklusom.

Primjer odgovora:

„Rješavam nuspojave poput API poziva ili DOM manipulacija pomoću useEffect kuka. Kuka mi omogućuje određivanje ovisnosti, osiguravajući da se efekt pokreće samo kada se te ovisnosti promijene. To pomaže u održavanju predvidljivog ponašanja i izbjegavanju beskonačnih petlji.

---

6) Recite mi o izazovnom bugu s kojim ste se susreli u React projektu i kako ste ga riješili.

Očekivano od kandidata: Ispitivač želi procijeniti vaše vještine rješavanja problema i otklanjanja pogrešaka.

Primjer odgovora:

„Na prethodnoj poziciji naišao sam na grešku gdje se ažuriranja stanja nisu odražavala u korisničkom sučelju. Nakon istraživanja shvatio sam da je problem uzrokovan izravnom mutacijom objekta stanja umjesto stvaranja nove kopije. Refaktorirao sam kod kako bi koristio nepromjenjiva ažuriranja, što je riješilo problem i poboljšalo konzistentnost podataka.“

---

7) Kako se rješava validacija obrazaca u React aplikacijama?

Očekivano od kandidata: Anketar želi vidjeti razumijete li kako implementirati validaciju korisničkog unosa.

Primjer odgovora:

„Obično koristim kontrolirane komponente za upravljanje unosima u obrasce, u kombinaciji s bibliotekama poput Formika ili React Hook Forma za validaciju. Ovi alati pojednostavljuju rukovanje pogreškama, upravljanje stanjem obrasca i integraciju s bibliotekama za validaciju trećih strana kao što je Yup.“

---

8) Opišite situaciju u kojoj ste morali surađivati ​​s backend developerima dok ste radili na React projektu.

Očekivano od kandidata: Anketar želi procijeniti vaše timske i komunikacijske vještine.

Primjer odgovora:

„U svojoj posljednjoj ulozi, blisko sam surađivao s backend programerima kako bih dizajnirao REST API-je za aplikaciju za nadzorne ploče. Dogovorili smo se o formatima podataka i krajnjim točkama tijekom ranih faza razvoja. Također sam kreirao probne odgovore kako bih nastavio razvoj front-enda dok se backend gradio, osiguravajući nesmetanu integraciju kasnije.“

---

9) Kako osiguravate da se vaše React komponente mogu ponovno koristiti i održavati?

Očekivano od kandidata: Anketar želi znati više o vašem pristupu dizajnu komponenti i skalabilnosti.

Primjer odgovora:

„Slijedim princip izgradnje malih, fokusiranih komponenti koje obavljaju jednu odgovornost. Također koristim props-ove za fleksibilnost i modularno stiliziram s CSS-in-JS-om ili styled-components. To osigurava da se komponente mogu lako ponovno koristiti i održavati tijekom cijelog projekta.“

---

10) Kako pratite trendove i najbolje prakse React.js-a?

Očekivano od kandidata: Anketar želi procijeniti vašu predanost kontinuiranom učenju.

Primjer odgovora:

„Pratim službenu dokumentaciju Reacta i blogove zajednice te pratim novosti. Također pratim predavanja s React konferencija poput React Confa i slušam podcaste poput 'React Podcasta'. Ovi resursi mi pomažu da ostanem informiran o novim značajkama kao što su istovremeno renderiranje i Server Components.“