react Interview Questions
Beginner Level10 questions
A JS library for building UIs with components and virtual DOM.
HTML-like syntax in JS that compiles to React.createElement().
Read-only data passed from parent to child components.
In-memory DOM copy that React diffs for efficient real DOM updates.
Props = external read-only data; State = internal mutable data.
Inline styles, CSS files, CSS Modules, styled-components, Tailwind CSS.
Components, Virtual DOM, declarative syntax, one-way data flow, rich ecosystem.
'class' is a reserved JS keyword; className maps to the DOM property.
Content between component tags; used for wrapper/container components.
Invisible wrapper that groups elements without adding extra DOM nodes.
Intermediate Level17 questions
Pass data via props from parent to child component.
Parent passes callback function as prop; child calls it with data.
Lift state to common parent, use Context API, or state management libraries.
Function that takes a component and returns an enhanced component.
Mounting (insert) → Updating (re-render) → Unmounting (remove).
Reusable functions starting with 'use' that encapsulate stateful logic.
Hook for side effects that runs after render based on dependencies.
API to share data across components without prop drilling.
Library for client-side routing — maps URLs to components without page reload.
Memoizes a function reference to prevent unnecessary child re-renders.
Caches expensive computation results; recalculates only when deps change.
React.memo = memoize component rendering; useMemo = memoize computed value.
JS compiler that converts modern JS/JSX to backward-compatible code.
Controlled = React state manages value; Uncontrolled = DOM + ref manages value.
React.memo, useMemo, useCallback, lazy loading, virtualization, debouncing.
Dispatch Action → Reducer Updates State → Provider Shares State → useSelector Accesses State.
reducers handle internal actions; extraReducers handle external actions (like async thunks).
Advanced Level17 questions
Chain them: React.memo for component, useCallback for methods, and useMemo for data objects.
Library for managing server state with caching, background fetching, and optimistic updates.
Diffing algorithm that compares virtual DOM trees for minimal updates.
Reconciliation engine enabling pausable, prioritized, incremental rendering.
Without cleanup (API calls, logging) and with cleanup (timers, subscriptions).
Predictable state container: Dispatch Action → Reducer Updates State → Provider Shares State → useSelector Accesses State.
Redux = complex state, frequent updates, devtools; Context = simple shared state.
Unidirectional data flow pattern: Action → Dispatcher → Store → View.
Single store, read-only state, changes via pure reducer functions.
Actions = event objects, Reducers = pure state transformers, Store = state holder.
Functions between action dispatch and reducer; used for async logic, logging.
No mutations, no API calls, no randomness, no side effects — pure functions only.
UI Event → dispatch(action) → middleware → reducer → store update → UI re-render.
Internal engine for incremental, priority-based rendering with concurrent features.
Pattern ensuring only one instance exists; in React: Redux store, module-level state.
Server state management: caching, background refresh, auto retry, loading states.
Components that render server-side with zero client JS, accessing backend directly.
Coding Output Level5 questions
var hoisting: declaration moves up, assignment stays — x is undefined.
setState is async — console.log shows old value in same render cycle.
Direct value = same stale reference (batched); functional form = latest state.
No array = every render; [] = once on mount; [dep] = when dep changes.
Closure captures old values when dependencies are missing or incorrect.
System Design Level4 questions
Debounced input → API call → cached results → keyboard-navigable dropdown.
Intersection Observer on sentinel element → load next page → append data.
Debounce (wait after last call), Throttle (max 1 per interval), Token Bucket.
HTTP cache, Service Worker, in-memory (React Query), localStorage, IndexedDB.