Architecture & Reusable Component Patterns
Architecture & Reusable Component Patterns
151) What is a âcontainer vs presentationalâ component pattern?
Answer: Container handles data/logic, presentational handles UI only.
Example: UserContainer fetches users â passes to UserList.
Trick: Logic separate from UI = easier testing.
152) What is the âcompound componentsâ pattern?
Answer: A parent component exposes related child components to share state via context.
Example: <Tabs><Tabs.List/><Tabs.Panel/></Tabs>
Memory: Compound = family components share one brain.
153) What is the âcontrolled vs uncontrolled componentâ pattern (advanced)?
Answer: Controlled: parent controls value via props; Uncontrolled: component manages its own internal state but can still notify parent.
Example: value/onChange for controlled, defaultValue for uncontrolled.
Trap: Donât mix both without clear behavior.
154) What is âprops as API designâ?
Answer: Designing component props like a clean contract: predictable naming (value/onChange, isOpen/onClose).
Trick: Props are your public interface.
155) What is âcomposition over inheritanceâ in React?
Answer: Build features by combining components and passing children instead of class inheritance.
Example: <Layout><Sidebar/><Content/></Layout>
156) What is ârenderless componentsâ concept?
Answer: Components that provide logic/state but donât render UI; now often done via custom hooks.
Example: useDropdown() returns state + handlers.
157) What is a âheadless UIâ library idea?
Answer: Provides accessibility + behavior without styling; you style it yourself.
Examples: Headless UI, Radix UI.
Trick: Headless = behavior only.
158) What are âcontrolled inputs at scaleâ problems?
Answer: Many inputs can cause many re-renders; use React Hook Form or uncontrolled strategy for performance.
Memory: Big forms â RHF helps.
159) How do you design a reusable Button component?
Answer: Support variants, sizes, disabled/loading, and pass through props.
Example: <Button variant="primary" loading />
Trap: Donât hardcode type="button" if itâs used in formsâmake it configurable.
160) What is the âpolymorphic componentâ pattern?
Answer: A component that can render as different HTML tags using as prop.
Example: <Text as="h1">Title</Text>
Trap: Ensure props compatibility for different tags.
State Management in Real Apps
161) How do you decide where state should live?
Answer:
Local UI state â component
Shared between siblings â lift to parent
Global app state (auth/theme) â context/store
Server state â React Query/SWR Trick: Local â Lift â Context/Store â Server cache.
162) What is âserver stateâ vs âclient stateâ?
Answer: Server state comes from backend (needs caching, refetching). Client state is UI-only (modal open, selected tab).
163) Why is React Query better for server data than Context?
Answer: It handles caching, refetch, stale time, retries, dedupingâContext doesnât.
164) What is a âselectorâ in state management?
Answer: A function that picks a slice of state to reduce re-renders.
Example: Zustand selector: useStore(s => s.user)
Trick: Selector = only subscribe to what you need.
165) What is Redux Toolkit and why popular?
Answer: Modern Redux with less boilerplate, good defaults, and built-in tools like createSlice.
Memory: RTK = Redux without pain.
166) What is middleware in Redux?
Answer: Functions that intercept actions (logging, async handling).
Example: thunk, saga.
Trap: Donât overcomplicate small apps.
167) What is Zustand (conceptually)?
Answer: A lightweight state store using hooks; minimal boilerplate, easy selectors.
168) What is âstate normalizationâ?
Answer: Store data by id in objects instead of nested arrays for faster updates.
Example: { byId: {1:{},2:{}}, allIds:[1,2] }
169) What is âderived stateâ in stores?
Answer: Values computed from state; better to compute via selectors rather than store duplicates.
Trick: Compute > duplicate.
170) Common state management trap in interviews?
Answer: Putting everything in global store. Most state should stay local.
Performance: Real-World Scenarios
171) What causes unnecessary re-renders most often?
Answer: Passing new object/array/function props each render, or using context for frequently changing data.
172) How do you memoize expensive calculations?
Answer: useMemo with correct dependencies.
Example: useMemo(()=>heavy(items), [items])
Trap: Wrong deps = stale output.
173) How do you memoize callbacks?
Answer: useCallback with correct dependencies.
Example: useCallback(()=>save(id), [id])
174) How do you optimize a slow list UI?
Answer: Use virtualization, avoid rendering hidden items, memoize row components, and keep props stable.
175) What is âlifting state too highâ problem?
Answer: More components re-render than needed. Keep state as low as possible.
176) Why does inline style/object props hurt memo?
Answer: New object reference every render triggers child re-render.
Fix: move styles outside, or memoize.
177) What is React Profiler useful for?
Answer: Identifies which components render, how often, and how long it takes.
178) What is âthrottlingâ vs âdebouncingâ in UI?
Answer: Throttle limits frequency; debounce delays until user stops.
Example: scroll = throttle, search input = debounce.
179) Why can large Context values be slow?
Answer: When value changes, all consumers may re-render. Split contexts or use selectors/store.
180) Performance trick to remember?
Answer: Keep props stable + keep state local + virtualize big lists.
SSR / Next.js Concepts (Common in React Interviews)
181) CSR vs SSR?
Answer: CSR renders in browser after JS loads. SSR renders HTML on server first, then hydrates on client.
Trick: SSR = faster first content, CSR = simpler.
182) What is hydration?
Answer: React attaches event handlers to server-rendered HTML and makes it interactive.
183) What causes hydration mismatch?
Answer: Different HTML on server vs client (random values, time-based, window access).
Fix: move client-only logic to useEffect or guard typeof window.
184) What is SSG (Static Site Generation)?
Answer: Pages are pre-built at build time. Fast and cacheable. Great for docs/blogs.
185) When to use SSR vs SSG vs CSR?
Answer:
SSR: dynamic, SEO, auth per request
SSG: content pages, marketing
CSR: dashboards behind login Memory: SSG for stable, SSR for dynamic SEO, CSR for app-like.
186) What is âstreaming SSRâ?
Answer: Server sends HTML in chunks so user sees content faster; Suspense boundaries can stream gradually.
187) Next.js App Router vs Pages Router (simple)?
Answer: App Router uses React Server Components + nested layouts; Pages Router is older file-based routing.
Trick: App Router = layouts + server components.
188) What are React Server Components (high level)?
Answer: Components that run on server, can fetch data, reduce client bundle. They donât ship JS to browser unless needed.
189) What is client component vs server component?
Answer: Client component uses hooks/events and runs in browser. Server component runs on server, great for data and reducing JS.
190) Common SSR trap?
Answer: Using window/localStorage during server render. Fix with useEffect or guards.
Security, Accessibility, and âHard Interview Trapsâ
191) What is XSS risk in React?
Answer: Mostly when using dangerouslySetInnerHTML or injecting unsanitized HTML.
Trick: Never trust user HTML.
192) What is CSRF and how relevant in React apps?
Answer: CSRF targets cookie-based auth; prevent with SameSite cookies and CSRF tokens.
193) How do you handle auth tokens safely?
Answer: Prefer httpOnly cookies for access tokens (server-managed). LocalStorage is vulnerable to XSS.
Trap: Donât claim localStorage is âsecureâ.
194) Accessibility must-have for custom components?
Answer: Proper roles/labels, keyboard navigation, focus management, and visible focus state.
195) How do you make a custom button accessible?
Answer: Use <button> tag whenever possible. If not, add role, tabIndex, and key handlers (Enter/Space).
Trick: Native elements are best.
196) What is âfocus trapâ in modals?
Answer: Keeping keyboard focus inside modal while open. Libraries help (Radix/Headless UI).
197) What questions should you ask interviewer at end?
Answer: Team expectations, success metrics, tech stack, code review process, onboarding, challenges.
Trick: Asking good questions shows senior mindset.
198) A tricky question: âWhy does state not update immediately after setState?â
Answer: Updates are scheduled and batched. Read updated state in next render or use functional update.
Example: setCount(c=>c+1)
Memory: State updates are async-ish.
199) Another trap: âWhy useEffect runs infinite loop?â
Answer: Because effect updates a dependency each run (or dependency changes every render). Fix dependency list and stable references.
200) Best final interview advice for React?
Answer: Explain clearly: state flow, effects, performance, and tradeoffs âand always give a small example + common pitfall.
Last updated