Routing & SPA Concepts
Routing & SPA Concepts
51) What is SPA (Single Page Application)?
Answer: A SPA loads one HTML page and updates the UI dynamically using JavaScriptânavigation doesnât require full page reload.
Example: React Router changes URL and renders a new component.
Memory trick: SPA = one page, many views.
52) What is React Router and why used?
Answer: React Router handles client-side routing (URLs â components) for SPAs.
Example: /users/:id renders <UserDetails />.
53) What is the difference between <Link> and <a>?
Answer: <Link> navigates without full reload (SPA). <a> reloads the page by default.
Example: <Link to="/about">About</Link>
Trap: Using <a> in SPA causes state reset.
54) What is useNavigate used for?
Answer: Programmatic navigation after actions (login success, submit, etc.).
Example: navigate("/dashboard") after login.
55) What is a route parameter?
Answer: Dynamic parts of a URL like /product/:id.
Example: const { id } = useParams();
Trick: Params = URL variables.
56) Query params vs route params?
Answer: Route params are part of path (/user/5), query params are after ? (/user?tab=info).
Example: useSearchParams() for query.
57) What is nested routing?
Answer: Child routes render inside a parent layout using <Outlet />.
Example: /dashboard/settings inside Dashboard layout.
Memory: Outlet = child page slot.
58) What is a âprotected routeâ?
Answer: Route that requires auth; redirects to login if not authenticated.
Example: <PrivateRoute><Dashboard/></PrivateRoute>
Trap: Donât rely only on frontend; server must enforce too.
59) How do you implement protected routes?
Answer: Check auth state and conditionally render or navigate.
Example (concept): return user ? children : <Navigate to="/login" />
60) What is 404 handling in React Router?
Answer: Add a catch-all route like path="*" to show NotFound page.
Memory: * = no match .
State Management Patterns (Local, Context, Redux-like)
61) When is useState enough?
Answer: When state is local to a component or small subtree and not shared widely.
62) When should you lift state up?
Answer: When two sibling components need the same state or need to stay in sync.
63) What problems does Context solve?
Answer: Avoids prop drilling for shared data like theme/auth/language.
64) What are Context downsides?
Answer: Can cause broad re-renders if the value changes frequently.
Trick: Context is not Redux âuse it wisely.
65) How to reduce re-renders with Context?
Answer: Split contexts (AuthContext, ThemeContext), memoize value, keep frequently changing state local.
66) What is useReducer and when use it?
Answer: Like Redux-style state transitions. Use when state logic is complex or has many related updates.
Example: const [state, dispatch] = useReducer(reducer, initialState);
Memory: Reducer = predictable state machine.
67) useState vs useReducer?
Answer: useState is simpler for small state. useReducer is better for complex transitions and grouped state.
68) What is an âactionâ in reducer pattern?
Answer: An object describing what happened, e.g. {type:"ADD_TODO", payload:{...}}.
69) What is Redux (conceptually)?
Answer: Centralized predictable state container with actions, reducers, and storeâuseful for large apps.
70) When should you use Redux/Zustand instead of Context?
Answer: When state is large, shared across many screens, needs devtools/history, or updates frequently.
Rendering, Performance, and Optimization
71) What is re-render in React? Is it bad?
Answer: Re-render is React recalculating UI. Itâs normal. Itâs only bad if it becomes expensive or causes lag.
72) How do you find performance issues in React?
Answer: React DevTools Profiler, browser performance tab, measure unnecessary renders.
73) What is React.memo?
Answer: Memoizes component output; prevents re-render if props didnât change (shallow).
Trap: Passing new objects/functions breaks it.
74) What is memoization âshallow compareâ mean?
Answer: React compares prop references, not deep content. New reference = considered changed.
75) How to prevent passing new object props each render?
Answer: Use useMemo for objects/arrays, or define constants outside component when possible.
76) When should you use useCallback?
Answer: When passing callbacks to memoized children, or when callback is dependency of other hooks.
77) What is code splitting?
Answer: Load code in chunks to reduce initial bundle size.
Example: React.lazy(() => import("./Admin"))
78) What is React.lazy and Suspense?
Answer: Lazy loads a component; Suspense shows fallback while loading.
Example:
79) What is ârender blockingâ in React apps?
Answer: Heavy JS during initial load blocks rendering. Reduce bundle size, split code, optimize.
80) What is âvirtualizationâ (windowing) for lists?
Answer: Render only visible items for huge lists (e.g. react-window).
Memory: Virtualization = render what you see.
Data Fetching & Effects (Real-world patterns)
81) Where should you fetch data in React?
Answer: Usually in useEffect or better: a data-fetching library (React Query/SWR) for caching and retries.
82) Why shouldnât you fetch directly inside render?
Answer: Render must be pure. Fetching in render causes repeated requests and side effects.
83) Basic useEffect data fetch example?
Answer:
Trick: Add cleanup to avoid setting state after unmount.
84) What is the âstale closureâ issue in effects?
Answer: Effect uses old values if dependencies are missing.
Fix: Put dependencies correctly or use functional updates.
85) Why does ESLint warn about missing deps?
Answer: Because missing dependencies cause bugs from stale state/props.
86) How do you avoid infinite loops in useEffect?
Answer: Donât set state unconditionally when that state is a dependency. Structure logic and dependency list correctly.
87) How do you handle loading and error states?
Answer: Use state flags: loading, error, or use React Query which provides these out of the box.
Trick: Always show user feedback.
88) What is React Query/SWR advantage?
Answer: Caching, deduping, retries, background refresh, mutation handlingâless manual state.
89) What is optimistic UI update?
Answer: Update UI immediately before server confirms; rollback if request fails.
Use case: like button, quick UX.
90) How do you cancel a fetch request?
Answer: Use AbortController.
Example:
Forms, Validation, and Common Libraries
91) What are common ways to handle forms in React?
Answer: Controlled inputs with useState, or libraries like React Hook Form / Formik.
92) Why is React Hook Form popular?
Answer: Less re-rendering, easy validation, fast for large forms.
93) Controlled vs uncontrolled in forms (interview version)?
Answer: Controlled uses state for each input; uncontrolled uses refs and browser form state.
94) How do you validate forms?
Answer: Simple checks in submit handler, or schema validation with Yup/Zod.
Trick: Client validation for UX; server validation for security.
95) What is onSubmit best practice?
Answer: Put validation and submit logic on <form onSubmit>, and use button type="submit".
96) What is debounced search input in React?
Answer: Delay API call until typing stops.
Example: use setTimeout in useEffect + cleanup.
Trap: forgetting cleanup causes multiple calls.
97) How do you manage focus in forms?
Answer: Use refs or autoFocus, and manage focus on error for accessibility.
98) What is a âcontrolled selectâ?
Answer: <select value={state} onChange={...}> same as input control.
99) How do you handle file uploads in React?
Answer: Use <input type="file" />, store file object from e.target.files[0], send via FormData.
100) What is the most common forms trap?
Answer: Over-rendering on every keystroke, missing name, and poor error UX (no inline messages).
Last updated