React Performance Optimization Quiz ( Intermediate ) - All Questions

This intermediate React performance optimization quiz is designed for developers who understand React basics and want to improve application speed, rendering efficiency, and scalability. It focuses on practical optimization techniques commonly tested in interviews and used in real-world React projects.

Question 1: What is the most common cause of performance issues in React applications?

Large CSS files
Unnecessary component re-renders
Using JSX
Too many routes

Explanation: Unnecessary re-renders increase computation and slow down the UI.

Question 2: Which change will always trigger a React component to re-render?

Console.log execution
CSS class change
State update
Function declaration

Explanation: Updating state always triggers a re-render.

Question 3: What is the primary purpose of React.memo?

Prevent unnecessary re-renders
Split code bundles
Cache API responses
Handle side effects

Explanation: React.memo avoids re-rendering when props have not changed.

Question 4: Why do inline object literals reduce performance?

They break JSX
They increase bundle size
They change reference on every render
They block rendering

Explanation: New object references cause React to detect changes.

Question 5: Which hook is best for memoizing expensive calculations?

useEffect
useRef
useCallback
useMemo

Explanation: useMemo caches expensive computed values.

Question 6: What is the main benefit of useCallback?

Managing state
Handling side effects
Preventing function recreation
Caching values

Explanation: useCallback stabilizes function references between renders.

Question 7: Why can inline functions cause unnecessary child re-renders?

They delay effects
They create new references
They break hooks
They increase bundle size

Explanation: New function references trigger child re-renders.

Question 8: Which technique reduces the initial JavaScript bundle size?

Code splitting
Prop drilling
Memoization
State lifting

Explanation: Code splitting loads code only when needed.

Question 9: What is React.lazy primarily used for?

Caching state
Component memoization
Lazy loading components
Profiling performance

Explanation: React.lazy enables dynamic loading of components.

Question 10: Why is Suspense required when using React.lazy?

Routing logic
Error handling
Fallback UI during loading
Memoization

Explanation: Suspense displays fallback UI while components load.

Question 11: Why is using array index as a key discouraged?

Slow compilation
Syntax errors
Large memory usage
Incorrect reconciliation

Explanation: Index keys break component identity during reordering.

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

Reference equality
Deep object values
DOM nodes
State values

Explanation: React.memo uses shallow reference comparison.

Question 13: Which hook stores mutable values without triggering re-render?

useEffect
useMemo
useState
useRef

Explanation: useRef updates do not cause re-renders.

Question 14: Why does splitting large components improve performance?

Less JSX
Smaller re-render scope
Faster API calls
More files

Explanation: Smaller components reduce unnecessary updates.

Question 15: Which hook defers non-urgent UI updates?

useTransition
useEffect
useMemo
useRef

Explanation: useTransition prioritizes urgent updates.

Question 16: What commonly causes unnecessary re-renders in React?

Pure components
Stable props
Changing reference values
Memoized callbacks

Explanation: Changing references make React think data changed.

Question 17: Why is immutability important for performance?

Memory reduction
Efficient change detection
Security
Hook rules

Explanation: React relies on reference comparison.

Question 18: Which optimization avoids recalculating derived data?

useMemo
useCallback
useEffect
useRef

Explanation: useMemo caches derived values.

Question 19: Which hook can block browser paint if misused?

useLayoutEffect
useEffect
useMemo
useRef

Explanation: useLayoutEffect runs synchronously before paint.

Question 20: What happens when a Context value updates?

Only provider re-renders
Only children re-render
Nothing happens
All consumers re-render

Explanation: All consumers update when context changes.

Question 21: Why should Context be avoided for frequently changing data?

Memory leaks
Slow builds
Widespread re-renders
Complex syntax

Explanation: Frequent updates cause many re-renders.

Question 22: What does batching state updates improve?

Performance
Accuracy
Security
Debugging

Explanation: Batching reduces unnecessary renders.

Question 23: Which hook stabilizes object props passed to children?

useRef
useEffect
useCallback
useMemo

Explanation: useMemo stabilizes object references.

Question 24: What is the main benefit of pure components?

Smaller bundles
Reduced unnecessary re-renders
Automatic API calls
Faster routing

Explanation: Pure components re-render only when props change.

Question 25: Which pattern isolates performance-heavy logic?

Custom hooks
Context
Prop drilling
Inline logic

Explanation: Custom hooks encapsulate reusable logic.

Question 26: What is a downside of excessive memoization?

Increased memory usage
Hook violations
JSX errors
State corruption

Explanation: Over-memoization adds memory and complexity overhead.

Question 27: Which optimization improves time-to-interactive?

Inline styles
Global state
Code splitting
Large bundles

Explanation: Code splitting improves initial load time.

Question 28: Which hook prevents child re-renders due to callbacks?

useCallback
useMemo
useRef
useEffect

Explanation: useCallback stabilizes callback references.

Question 29: Why should heavy logic be avoided during render?

Hooks break
JSX fails
It blocks rendering
Syntax issues

Explanation: Heavy logic slows down rendering.

Question 30: What does React Fiber primarily improve?

API caching
CSS handling
State storage
Interruptible rendering

Explanation: Fiber enables non-blocking, interruptible rendering.

Question 31: Which hook keeps UI responsive during heavy updates?

useTransition
useEffect
useMemo
useRef

Explanation: useTransition prioritizes urgent updates.

Question 32: Why is splitting state into smaller pieces beneficial?

Complex logic
Slower updates
Reduced re-render scope
More code

Explanation: Smaller state updates limit re-renders.

Question 33: Which technique improves route-level performance?

Lazy loading
Memoization
Context
Prop drilling

Explanation: Lazy loading loads routes only when needed.

Question 34: What is the impact of unnecessary re-renders?

State loss
Hook violations
No effect
Performance degradation

Explanation: Extra renders slow down applications.

Question 35: Which hook is best for storing non-UI values?

useRef
useState
useMemo
useEffect

Explanation: useRef stores values without UI updates.

Question 36: Which practice improves scalability of React apps?

Single component architecture
Ignoring performance
Performance optimization
Inline logic everywhere

Explanation: Optimized apps scale better.

Question 37: Why should deeply nested components be avoided?

State reset
Hook violations
Syntax errors
Harder optimization

Explanation: Deep nesting complicates performance tuning.

Question 38: Which update pattern ensures latest state usage?

Functional updater
useRef
useMemo
useCallback

Explanation: Functional updates always receive the latest state.

Question 39: Which optimization limits re-render scope?

Component memoization
Global state
Prop drilling
Inline functions

Explanation: Memoization reduces re-render impact.

Question 40: Which hook manages subscriptions efficiently?

useEffect
useState
useMemo
useCallback

Explanation: Subscriptions are handled inside useEffect.

Question 41: Why split Context providers?

Reduced unnecessary re-renders
Cleaner syntax
Smaller files
Better styling

Explanation: Splitting context limits re-render scope.

Question 42: Which practice prevents wasted renders in lists?

Stable unique keys
Index keys
Inline objects
Context

Explanation: Stable keys preserve component identity.

Question 43: Which hook caches derived values?

useMemo
useEffect
useRef
useCallback

Explanation: useMemo caches derived data.

Question 44: Why is performance optimization critical for UX?

Faster, smoother UI
More features
Complex architecture
More hooks

Explanation: Users expect responsive applications.

Question 45: Which practice improves rendering efficiency?

Memoization
Large components
Inline logic
Prop drilling

Explanation: Memoization avoids unnecessary work.

Question 46: What is the biggest benefit of React performance optimization?

Better scalability and UX
More code
Complex patterns
More dependencies

Explanation: Optimized apps scale better and feel faster.

Back to programming Quizzes

React Performance Optimization Quiz ( Intermediate )

Questions

~10

Minutes

Min Limit