🎤 Top 81 Interview Questions
These are the most commonly asked Java interview questions — tap to reveal the answer.
Facebook (Meta) dwara MAINTAINED, EK JavaScript LIBRARY hai, USER INTERFACES banane ke liye — COMPONENT-BASED architecture se, REUSABLE UI PIECES banate hain.
JavaScript XML — EK SYNTAX EXTENSION jo, HTML-jaisa MARKUP, JavaScript CODE ke andar LIKHNE deta hai. Babel, JSX ko React.createElement() calls mein TRANSFORM karta hai.
EK LIGHTWEIGHT, JavaScript REPRESENTATION hai ACTUAL DOM ka — React ise USE karke EFFICIENTLY DECIDE karta hai, ki REAL DOM mein KYA UPDATE karna hai.
EK JavaScript FUNCTION hai, jo JSX RETURN karta hai — React APPLICATIONS, COMPONENTS ke TREE se BANI HOTI hain.
Parent COMPONENT se, CHILD COMPONENT ko DATA PASS karne ka way — READ-ONLY hain, CHILD inhe MODIFY NAHI kar sakta.
Naye aur purane VIRTUAL DOM TREES ko "DIFF" (COMPARE) karne ka PROCESS — sirf ACTUALLY changed PARTS, REAL DOM mein UPDATE hote hain.
Class components, ES6 classes se DEFINE hote hain, lifecycle methods use karte hain. Functional components, PLAIN functions hain — hooks se STATE/LIFECYCLE HANDLE karte hain, aur MODERN React mein PREFERRED hain.
React, COMPONENT LOGIC (createElement, hooks) deta hai. ReactDOM, COMPONENTS ko ACTUAL BROWSER DOM mein RENDER karta hai — dono ALAG PACKAGES hain.
Vite, MODERN aur FASTER build tool hai (esbuild-based). CRA, PURANA TOOL tha, jo ab OFFICIALLY DEPRECATED hai.
EK ARRAY — [CURRENT VALUE, UPDATER FUNCTION] — DESTRUCTURING se inhe NAAM diye jaate hain.
RENDER ke BAAD — DEPENDENCY ARRAY CONTROL karta hai, KAB EFFECT RE-RUN HOGA (empty [] = sirf MOUNT par).
Component UNMOUNT hone par, YA NEXT EFFECT RUN hone se PEHLE — subscriptions/timers CLEAR karne ke liye USE hota hai.
Provider, VALUE ko POORE SUBTREE mein "BROADCAST" karta hai — useContext se, kisi bhi DESCENDANT se DIRECTLY, VALUE ACCESS ho sakti hai.
useRef ki VALUE CHANGE hone par RE-RENDER TRIGGER NAHI hota. useState mein, hota hai.
EK function hai jiska NAAM "use" se SHURU hota hai, aur jo DUSRE hooks USE karta hai — STATEFUL LOGIC ko COMPONENTS ke beech SHARE karne ka way.
Hooks sirf TOP-LEVEL par CALL hone chahiye (loops/conditions ke andar nahi), aur sirf React functions se hi CALL hone chahiye.
PERFORMANCE ke liye — React 18+ mein, HAR jagah (promises, setTimeout mein bhi) AUTOMATIC batching hoti hai.
useLayoutEffect, DOM mutations ke turant baad SYNCHRONOUSLY RUN hota hai, BROWSER paint se pehle. useEffect, paint ke baad ASYNC RUN hota hai.
React EXPLICITLY COMPOSITION RECOMMEND karta hai — CHHOTE, FOCUSED components COMBINE hoke COMPLEX UIs banate hain, jyada FLEXIBLE tareeke se.
EK SPECIAL prop hai, jo AUTOMATICALLY PASS hoti hai jab, EK component ke opening/closing tags ke beech CONTENT rakha jaata hai.
TERNARY operator (condition ? A : B), logical AND (condition && A), ya if-else statements JSX ke bahar — React mein koi SPECIAL syntax nahi hai iske liye.
React ko EFFICIENTLY DECIDE karne mein HELP karta hai, ki LIST mein kya ADD/REMOVE/REORDER hua hai.
Agar LIST reorder/filter ho sakti hai, React CONFUSE ho sakta hai ki KAUN sa item KAUN sa hai — STABLE, UNIQUE id BEST hai.
Agar count 0 hai, {count && <List />}, "0" (string, actual 0 nahi) render kar dega — kyunki 0 falsy hai, lekin React ise render kar deta hai.
children prop ke elements par iterate karne ka SAFE way — children EK single element ya array, dono ho sakta hai.
Multiple elements return karne deta hai, bina EK extra wrapper <div> add kiye — CSS layout ko break hone se BACHATA hai.
Shared state ko uske nearest common PARENT mein MOVE karna — siblings ko props se DOWN pass ki jaati hai.
Jab STATE update LOGIC complex hai (multiple sub-values ya PREVIOUS state par complex dependency) — reducer function mein LOGIC centralized hoti hai.
reducer function ko TRIGGER karta hai — reducer, existing state aur action dekh ke NAYA state RETURN karta hai.
EK "mini-Redux" pattern — GLOBAL state (auth, theme) ko EXTERNAL library ke bina manage kiya ja sakta hai.
EK PREDICTABLE state container — SINGLE store, PURE reducer functions, aur actions ke through state update hoti hai.
Zustand, MODERN aur LIGHTWEIGHT alternative hai — MINIMAL boilerplate (no providers, no actions) ke saath global state manage karta hai.
Server state (API se aaya data), React Query jaisi libraries se manage hota hai. Client state (UI state), Redux/Zustand/Context se.
Context value change hone par, POORA subscribing subtree RE-RENDER hota hai — GLOBAL, STABLE data (theme, auth) ke liye BEST hai.
createSlice(), boilerplate (action types, action creators) DRASTICALLY kam karta hai — Immer ke through, "mutating" syntax ALLOW karta hai safely.
EK THIRD-PARTY library — React khud ROUTING provide nahi karta. CLIENT-SIDE routing enable karta hai, bina poora page reload kiye.
Link, poora page reload nahi karta — sirf URL change karta hai, aur React Router matching component render kar deta hai.
URL mein dynamic segments (jaise /products/:id) se VALUES extract karta hai (strings ke roop mein).
Query string parameters (jaise ?sort=price) ko READ/UPDATE karne ke liye USE hota hai.
Parent layout component ke andar EK "placeholder" hai — matching child route ka component yaha render hota hai.
EK navigate function — navigate("/dashboard") call karne se PROGRAMMATICALLY URL change ho jaati hai.
CURRENT history entry ko REPLACE kar deta hai — jaise login ke baad, user "back" button se login page par wapas na jaa sake.
Kisi bhi UNMATCHED path ko CATCH karta hai — 404 "Not Found" pages ke liye USE hota hai.
Default child route, jab URL EXACTLY parent path match kare — index prop (koi path nahi) se DEFINE hota hai.
EK FORM element hai jiski VALUE React state se CONTROL hoti hai — value prop aur onChange handler dono ZAROORI hain.
DOM khud input ki VALUE manage karta hai — React state INVOLVED nahi hoti. useRef se value ko, jab ZAROORAT ho, read kiya jaata hai.
camelCase mein (onClick, onChange) — HTML attributes (onclick) se DIFFERENT.
Ye render ke waqt IMMEDIATELY function ko call kar dega — onClick={handleClick} (bina parentheses) CORRECT hai.
Default browser behavior (jaise form submit par page reload) ROKTA hai.
Uncontrolled inputs (refs) use karta hai PERFORMANCE ke liye — MINIMAL re-renders hote hain, har keystroke par nahi.
checked prop (value ke bajaye) — kyunki checkbox ki value boolean hai.
Har keystroke par API call karna WASTEFUL hai — debouncing, API call ko tab tak DELAY karta hai jab tak user typing rok na de.
SECURITY reasons se — JavaScript programmatically file input ki value SET nahi kar sakta.
Props ka SHALLOW comparison karta hai — agar same hain, component ka RE-RENDER skip ho jaata hai.
EK expensive COMPUTATION ke result ko — sirf tab RE-CALCULATE hota hai, jab dependencies change hoti hain.
EK function ko MEMOIZE karta hai — har render par NAYA instance banane ke bajaye, same reference return karta hai.
Ye "free" nahi hain — har ek ka khud ka memory/comparison OVERHEAD hai. Sirf MEASURED performance problems ke liye use karo.
EK component ko "lazily" load karta hai — code tabhi download hota hai, jab woh pehli baar render hone wala ho.
Jab tak lazy component ka code load ho raha hai, fallback UI (jaise loading spinner) dikhaya jaata hai.
Har page ko alag lazy component banana — MOST common aur EFFECTIVE pattern hai bundle size optimize karne ka.
Kaun se components RE-RENDER hue, aur kitna time laga — performance bottlenecks identify karne ke liye.
Agar EK prop, EK NAYA object/array/function hai (har render par re-create hota hai), React.memo kaam nahi karega, jab tak useMemo/useCallback se "stable" na rakha jaaye.
"The more your tests resemble the way your software is used, the more confidence they can give you" — USER ki tarah test karo, internal implementation nahi.
render(), component ko virtual DOM mein render karta hai. screen se, getByText/getByRole jaisi QUERIES se elements dhoondhe jaate hain.
ACCESSIBILITY ensure karta hai — screen readers use karne wale users ke liye bhi, ACCESSIBLE hona test hota hai.
toBe(), primitive values ke liye hai (reference equality). toEqual(), objects/arrays ke liye hai (deep equality).
EK mock function banata hai — calls track kiye ja sakte hain (toHaveBeenCalled, toHaveBeenCalledTimes).
REAL network requests, tests ko slow aur flaky (internet par depend) banate hain.
ASYNCHRONOUS updates ke liye (jaise API call ke baad state update) — warna test assertion, data load hone se pehle hi run ho sakta hai.
Custom hooks ko EK dummy component banaye bina test karta hai — result.current se, hook ki return value access hoti hai.
Jab bhi EK action, state update karta hai — React ko ensure karne deta hai, ki saare updates "flush" ho chuke hain assertions se pehle.
EK class component hai, jo static getDerivedStateFromError() aur componentDidCatch() implement karta hai — child tree mein JavaScript errors ko "catch" karta hai.
Sirf rendering lifecycle methods aur constructors mein errors ke liye hain — event handlers ke liye normal try-catch use karo.
Code splitting (React.lazy) ke liye — modern React mein data fetching ke liye bhi use hota hai.
Server par render hone wale components — unka JavaScript code, client ko kabhi bheja hi nahi jaata, sirf result (HTML/data) bheja jaata hai.
EK file ko explicitly "Client Component" mark karta hai — interactivity (onClick, useState) chahiye to ZAROORI hai.
Interactivity ke liye JavaScript runtime chahiye, jo server par nahi hai — Client Components ye provide karte hain.
EK component ko uske parent DOM hierarchy ke bahar, kisi dusre DOM node mein render karne deta hai.
Wahi jaha woh define hua tha — context/events, DOM hierarchy se nahi, React tree se follow karte hain.
Modals, Tooltips, Dropdowns — parent ke CSS (overflow: hidden, z-index) ke "trap" se bachate hain.
EK update ko "non-urgent" mark karta hai — React ise low-priority treat karta hai, urgent updates (jaise typing) ko pehle process karta hai.