React JS Quiz ( Advanced ) - All Questions

This advanced React JS quiz is crafted for experienced developers who want to test deep knowledge of React internals, performance optimization, hooks behavior, rendering patterns, concurrency, and real-world edge cases. Perfect for senior-level interviews and production-grade React mastery.

Question 1: Why does React require immutability when updating state?

To reduce memory usage
To enable efficient change detection
To avoid syntax errors
To support async rendering

Explanation: React relies on reference comparison to efficiently detect changes.

Question 2: What problem does React Fiber primarily solve?

State management
Blocking rendering issues
CSS scoping
API handling

Explanation: Fiber enables interruptible rendering to prevent UI blocking.

Question 3: When does useLayoutEffect run compared to useEffect?

After paint
Before paint
During render
Only on unmount

Explanation: useLayoutEffect runs synchronously before the browser paints.

Question 4: What happens if you update state inside useEffect without dependencies?

Runs once
Causes infinite re-renders
State updates are ignored
Component unmounts

Explanation: State updates trigger re-renders, causing the effect to run repeatedly.

Question 5: Why is using array index as key problematic?

Keys become strings
Breaks styling
Causes incorrect component reuse
React throws errors

Explanation: Index keys can cause incorrect reconciliation when items reorder.

Question 6: Which hook is most appropriate for managing complex state transitions?

useState
useMemo
useReducer
useRef

Explanation: useReducer centralizes complex state logic and transitions.

Question 7: What does React.memo compare by default?

Deep equality
Reference equality
Serialized values
DOM nodes

Explanation: React.memo performs a shallow reference comparison of props.

Question 8: What is the main downside of excessive useCallback usage?

Memory leaks
Increased complexity without benefits
Broken hooks rules
Lost references

Explanation: Overusing useCallback adds complexity and may hurt readability.

Question 9: What does stale closure refer to in React hooks?

Unmounted components
Outdated state captured by closures
Broken refs
Invalid dependencies

Explanation: Closures may capture outdated state values if dependencies are incorrect.

Question 10: Which scenario best fits useRef over useState?

Trigger UI updates
Persist mutable value without re-render
Store derived state
Manage side effects

Explanation: useRef stores mutable values without triggering re-renders.

Question 11: Why should side effects not be executed during render?

No DOM access
Render must be pure
Hooks break
State resets

Explanation: Render must remain pure to ensure predictable reconciliation.

Question 12: What does reconciliation mean in React?

State synchronization
Comparing virtual DOM trees
Updating hooks
Event delegation

Explanation: Reconciliation compares previous and next virtual DOM trees.

Question 13: What is the purpose of Suspense in concurrent React?

Error handling
Blocking rendering
Coordinating async rendering
State sharing

Explanation: Suspense coordinates async rendering and fallback UI.

Question 14: Which hook should NOT contain conditional logic?

useState
useEffect
useContext
All hooks

Explanation: Hooks must be called unconditionally to preserve call order.

Question 15: What happens when setState is called with the same state value?

Always re-renders
Never re-renders
May bail out of re-render
Throws error

Explanation: React may skip re-render if the value is referentially equal.

Question 16: Why is derived state from props discouraged?

Performance issues
State duplication bugs
Hook limitations
JSX errors

Explanation: Derived state often leads to inconsistent and duplicated state.

Question 17: Which pattern replaces most HOC use cases today?

Render props
Custom hooks
Fragments
Refs

Explanation: Custom hooks share logic more cleanly than HOCs.

Question 18: What is the effect of StrictMode double-invoking effects in development?

Bug
Performance optimization
Detect unsafe side effects
Production behavior

Explanation: StrictMode helps identify side-effect related bugs.

Question 19: Which hook is best for subscribing to external stores?

useEffect
useSyncExternalStore
useReducer
useMemo

Explanation: useSyncExternalStore is designed for external store subscriptions.

Question 20: Why should expensive computations not be done during render?

Memory usage
Blocks rendering
Breaks hooks
Invalid JSX

Explanation: Expensive computations slow rendering and hurt UX.

Question 21: What does batching state updates improve?

Accuracy
Security
Performance
Readability

Explanation: Batching reduces unnecessary re-renders.

Question 22: Which scenario can cause unnecessary re-renders?

Stable props
Inline object literals
Memoized callbacks
Pure components

Explanation: Inline objects create new references on each render.

Question 23: What is the main risk of useLayoutEffect misuse?

Memory leak
Blocking browser paint
State loss
Unmount failure

Explanation: Blocking paint can cause visible UI jank.

Question 24: What is the purpose of key stability?

Sorting lists
Maintaining component identity
Styling elements
Event binding

Explanation: Stable keys preserve component identity across renders.

Question 25: Which hook helps avoid race conditions in async effects?

useMemo
useRef
useEffect cleanup
useCallback

Explanation: Cleanup functions cancel outdated async operations.

Question 26: Why is Context not ideal for frequently changing data?

API limits
Causes widespread re-renders
Memory overhead
Syntax complexity

Explanation: Context updates trigger re-renders for all consumers.

Question 27: What does React.lazy rely on internally?

Promises
Callbacks
Generators
Workers

Explanation: React.lazy uses dynamic import promises.

Question 28: Which concept enables interruptible rendering?

Virtual DOM
Fiber architecture
Hooks
Context

Explanation: Fiber allows rendering work to be paused and resumed.

Question 29: What is a common cause of memory leaks in React?

Pure components
Uncleared subscriptions
Memoization
JSX fragments

Explanation: Subscriptions must be cleaned up to avoid leaks.

Question 30: Why should effects declare all dependencies?

Linting rules
Avoid stale data bugs
Reduce bundle size
Improve JSX

Explanation: Missing dependencies cause stale closures.

Question 31: What happens if hooks order changes between renders?

Graceful fallback
Silent failure
Runtime error
State reset

Explanation: React relies on hook order consistency.

Question 32: Which hook is safest for DOM measurements?

useEffect
useLayoutEffect
useMemo
useRef

Explanation: useLayoutEffect ensures measurements before paint.

Question 33: What is the primary benefit of concurrent rendering?

Smaller bundles
Non-blocking UI updates
Simpler code
Fewer hooks

Explanation: Concurrent rendering keeps the UI responsive.

Question 34: Why is mutating props dangerous?

Syntax errors
Unexpected side effects
Hook violations
Slow rendering

Explanation: Props mutation breaks component predictability.

Question 35: What does useDeferredValue help with?

Async fetching
Deferring non-urgent updates
Memoization
State resets

Explanation: It defers less important updates to keep UI responsive.

Question 36: Which issue can arise from excessive memoization?

Memory overhead
Broken rendering
Lost state
Invalid JSX

Explanation: Memoization consumes memory and adds complexity.

Question 37: Why should reducers be pure functions?

Performance
Predictability
Hook rules
JSX validity

Explanation: Pure reducers ensure predictable state updates.

Question 38: What happens during hydration in React?

Client renders fresh DOM
Server HTML is reused
State resets
Effects skip

Explanation: Hydration attaches event listeners to server-rendered HTML.

Question 39: Which pattern best isolates side effects?

Render logic
Custom hooks
JSX fragments
Reducers

Explanation: Custom hooks encapsulate side effects cleanly.

Question 40: Why should you avoid storing JSX in state?

Memory waste
Breaks reconciliation
Derived data anti-pattern
Invalid syntax

Explanation: JSX should be derived during render, not stored.

Question 41: What does useTransition primarily optimize?

Data fetching
Urgent vs non-urgent updates
Memory usage
Hook order

Explanation: useTransition prioritizes urgent updates.

Question 42: Which issue can be caused by missing cleanup in effects?

Syntax error
Memory leak
State loss
Unmount failure

Explanation: Missing cleanup leaves subscriptions active.

Question 43: Why should render functions remain deterministic?

Faster builds
Predictable UI output
Hook availability
Smaller bundles

Explanation: Deterministic renders ensure consistent UI.

Question 44: What is the primary cost of unnecessary re-renders?

Security risk
Performance degradation
State corruption
Hook errors

Explanation: Extra re-renders slow down applications.

Question 45: Which React feature enables time-slicing?

Virtual DOM
Fiber
StrictMode
Context

Explanation: Fiber enables time-slicing for rendering.

Question 46: What is the safest way to update state based on previous state?

Direct mutation
Functional updater
useRef
useMemo

Explanation: Functional updaters ensure correct previous state usage.

Question 47: Why does React batch state updates?

To avoid syntax errors
To reduce unnecessary re-renders
To support async functions
To simplify JSX

Explanation: Batching state updates improves performance by minimizing re-renders.

Question 48: What is the main purpose of the reconciliation algorithm?

Handling events
Comparing virtual DOM trees
Managing state
Styling components

Explanation: Reconciliation determines the minimal DOM changes needed.

Question 49: Why should functions passed as props often be memoized?

To avoid syntax issues
To prevent unnecessary child re-renders
To increase memory usage
To enable hooks

Explanation: Memoized functions maintain stable references across renders.

Question 50: What problem does useCallback primarily solve?

State persistence
Function re-creation on every render
Side-effect cleanup
DOM manipulation

Explanation: useCallback prevents unnecessary function re-creation.

Question 51: When does useMemo recompute its value?

On every render
When dependencies change
Only once
After unmount

Explanation: useMemo recalculates only when its dependencies change.

Question 52: Why is mutating state objects directly a serious issue?

React crashes
Changes are not detected reliably
Hooks stop working
JSX fails

Explanation: React relies on immutability for efficient change detection.

Question 53: What happens if a component throws an error during rendering?

App crashes always
Nearest error boundary catches it
React ignores it
State resets

Explanation: Error boundaries catch rendering errors in the component tree.

Question 54: Which hook is NOT allowed to be called conditionally?

useState
useEffect
useContext
All hooks

Explanation: All hooks must follow the Rules of Hooks.

Question 55: Why must hooks be called in the same order on every render?

Performance
JS syntax rules
React relies on call order internally
Browser limitation

Explanation: React maps hook calls by order, not by name.

Question 56: What is the primary role of React Fiber?

Styling engine
New reconciliation architecture
State container
Routing system

Explanation: Fiber enables incremental rendering and better scheduling.

Question 57: Which scenario causes unnecessary re-renders?

Primitive props
Inline object or function props
Memoized components
Stable references

Explanation: Inline objects/functions create new references on each render.

Question 58: What does StrictMode intentionally do in development?

Improve performance
Double-invoke certain lifecycle methods
Disable hooks
Optimize bundles

Explanation: StrictMode helps detect unsafe side effects.

Question 59: Which hook runs synchronously before browser paint?

useEffect
useLayoutEffect
useMemo
useCallback

Explanation: useLayoutEffect blocks paint until it completes.

Question 60: What is a stale closure problem?

Memory leak
Using outdated state inside callbacks
Broken JSX
Invalid props

Explanation: Closures may capture outdated state values.

Question 61: How can stale closures be avoided?

Inline functions
Dependency arrays
Refs or functional updates
Fragments

Explanation: Refs or functional updates ensure latest values.

Question 62: Why is array index a poor choice for list keys?

Syntax restriction
Breaks reconciliation on reordering
Increases bundle size
Slows hooks

Explanation: Index keys cause incorrect DOM reuse when order changes.

Question 63: What causes memory leaks in React components?

Large JSX
Uncleared subscriptions or timers
Using props
Fragments

Explanation: Side effects must be cleaned up properly.

Question 64: Why should expensive calculations be memoized?

Reduce memory
Avoid blocking render cycles
Improve JSX readability
Enable hooks

Explanation: Expensive recalculations can degrade performance.

Question 65: What does React.lazy require to work properly?

Redux
Suspense boundary
Context API
Error boundary only

Explanation: Suspense provides fallback UI during lazy loading.

Question 66: What is the main drawback of prop drilling?

Syntax complexity
Tight component coupling
Performance loss only
Broken hooks

Explanation: Prop drilling makes components harder to maintain.

Question 67: What distinguishes useReducer from useState?

Async behavior
Centralized state transition logic
DOM access
Better styling

Explanation: useReducer centralizes complex state logic.

Question 68: Which pattern enables logic reuse without inheritance?

Class components
Higher-order components
Refs
Keys

Explanation: HOCs wrap components to add shared behavior.

Question 69: What is the purpose of forwardRef?

Pass props deeper
Expose child DOM refs to parents
Optimize state
Handle routing

Explanation: forwardRef allows parent components to access child refs.

Question 70: Why are side effects forbidden inside render?

JS limitations
Render must stay pure
Hooks restriction
DOM access denied

Explanation: Pure renders ensure predictable UI output.

Question 71: What happens when context value changes?

Only provider re-renders
All consumers re-render
DOM resets
Hooks reset

Explanation: All subscribed consumers re-render on context change.

Question 72: Why is excessive context usage discouraged?

Syntax complexity
Uncontrolled re-renders
JS errors
Bundle size

Explanation: Context updates can trigger widespread re-renders.

Question 73: What is the benefit of splitting context?

Simpler code
More providers
Finer-grained re-renders
Better JSX

Explanation: Smaller contexts reduce unnecessary updates.

Question 74: What does memoization rely on?

Deep comparison
Reference equality
JSON comparison
String matching

Explanation: React uses shallow reference comparison.

Question 75: Why can inline objects break React.memo?

Syntax issue
New reference every render
Hooks conflict
JS engine bug

Explanation: New references invalidate memoization.

Question 76: What is concurrent rendering designed to improve?

Styling
User-perceived responsiveness
State accuracy
JS speed

Explanation: Concurrency allows React to prioritize updates.

Question 77: Which hook is best for syncing DOM measurements?

useEffect
useLayoutEffect
useMemo
useCallback

Explanation: useLayoutEffect runs before paint for layout reads.

Question 78: What happens if setState is called during rendering?

Ignored
Throws error or infinite loop
Queued safely
Converted to effect

Explanation: Calling setState during render causes render loops.

Question 79: Why should reducers be pure functions?

Performance
Predictable state transitions
Hook limitation
JS syntax

Explanation: Pure reducers ensure predictable updates.

Question 80: What causes unnecessary effect re-execution?

Stable dependencies
Missing dependency array
Memoized values
Refs

Explanation: Missing dependencies cause effects to run every render.

Question 81: What does cleanup in useEffect run on?

Mount only
Before next effect and unmount
Render phase
State update

Explanation: Cleanup runs before re-run and on unmount.

Question 82: Why should derived state be avoided?

Hard to compute
Risk of inconsistency
Hooks limitation
Slow rendering

Explanation: Derived state can easily become outdated.

Question 83: Which pattern avoids duplicated state?

Prop drilling
Single source of truth
Multiple providers
Inline state

Explanation: Single source of truth prevents inconsistencies.

Question 84: What is the danger of overusing useMemo?

Memory leaks
Added complexity without benefit
Broken hooks
JS errors

Explanation: Memoization has overhead and should be justified.

Question 85: Why does React favor composition over inheritance?

JS limitation
Better flexibility and reuse
Smaller bundles
Faster rendering

Explanation: Composition enables flexible UI building.

Question 86: What happens when a key changes between renders?

Component updates
Component is recreated
State preserved
Effect skipped

Explanation: Changing keys forces component remount.

Question 87: Which hook is best for imperative DOM actions?

useState
useRef
useMemo
useContext

Explanation: useRef enables imperative DOM access.

Question 88: Why should effects not depend on objects created inline?

Syntax errors
Infinite loops
Broken JSX
DOM access

Explanation: Inline objects change reference every render.

Question 89: What does unmounting a component do?

Reset state only
Remove component from DOM
Freeze state
Pause effects

Explanation: Unmounting removes the component entirely.

Question 90: Why is React considered declarative?

Manual DOM control
UI described as a function of state
Class-based syntax
Template-driven

Explanation: Declarative code describes what UI should look like.

Question 91: What is the primary benefit of code splitting?

More files
Reduced initial bundle size
Simpler JSX
Faster state updates

Explanation: Code splitting improves initial load performance.

Question 92: Which situation forces a full component remount?

State update
Key change
Prop update
Context update

Explanation: Key changes force React to recreate components.

Back to programming Quizzes

React JS Quiz ( Advanced )

Questions

~10

Minutes

Min Limit