React JS Quiz ( Intermediate ) - All Questions

This intermediate-level React JS quiz is designed for developers who already understand React basics and want to test applied concepts like hooks, state management, lifecycle behavior, lists, forms, and performance patterns. Ideal for interview preparation and real-world React practice.

Question 1: What happens when setState is called multiple times synchronously in React?

State updates immediately
Each call overrides the previous one
Updates may be batched
Component does not re-render

Explanation: React may batch multiple state updates for performance reasons.

Question 2: Why should you avoid updating state directly in React?

It causes syntax errors
It breaks React's re-rendering logic
It slows down JavaScript
It is allowed only in hooks

Explanation: Direct state mutation prevents React from detecting changes correctly.

Question 3: Which hook is best suited for fetching data on component mount?

useState
useEffect
useMemo
useCallback

Explanation: useEffect is designed for side effects such as API calls.

Question 4: What is the purpose of the dependency array in useEffect?

To style components
To control effect execution
To store state
To pass props

Explanation: The dependency array controls when the effect runs.

Question 5: What does React use keys for when rendering lists?

Sorting items
Styling elements
Identifying elements uniquely
Handling events

Explanation: Keys help React identify which items have changed, added, or removed.

Question 6: Which scenario best fits lifting state up?

Single component uses state
Multiple components need shared data
State never changes
Static UI rendering

Explanation: Lifting state up allows multiple components to share the same state.

Question 7: What will happen if you omit the dependency array in useEffect?

Effect runs once
Effect never runs
Effect runs after every render
Effect runs only on unmount

Explanation: Without dependencies, useEffect runs after every render.

Question 8: Which hook helps prevent unnecessary re-renders by memoizing functions?

useMemo
useEffect
useCallback
useRef

Explanation: useCallback memoizes function references.

Question 9: What is a controlled component in React?

Component without state
Form element controlled by React state
Component using refs only
Component with no props

Explanation: Controlled components derive form values from React state.

Question 10: Which hook allows access to previous state values?

useState with callback
useEffect
useRef
useContext

Explanation: The functional form of setState provides access to previous state.

Question 11: What does React.memo do?

Stores state permanently
Prevents component re-render if props don't change
Handles side effects
Replaces useMemo

Explanation: React.memo optimizes performance by memoizing components.

Question 12: Which hook is commonly used to persist mutable values without re-rendering?

useState
useEffect
useRef
useMemo

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

Question 13: What is prop drilling?

Passing props through many levels
Validating props
Removing props
Mutating props

Explanation: Prop drilling occurs when props are passed through multiple layers.

Question 14: Which feature helps avoid prop drilling?

Redux only
Context API
useState
Fragments

Explanation: Context API allows data sharing without deep prop passing.

Question 15: What does useContext return?

Provider component
Consumer component
Context value
Reducer function

Explanation: useContext returns the current value of the context.

Question 16: Which lifecycle method is equivalent to useEffect cleanup?

componentDidMount
componentDidUpdate
componentWillUnmount
shouldComponentUpdate

Explanation: Cleanup functions behave like componentWillUnmount.

Question 17: Why should keys not be generated using array index?

Syntax error risk
Performance issues on reordering
Keys become strings
React disallows it

Explanation: Index keys can cause issues when list order changes.

Question 18: What is conditional rendering in React?

Rendering CSS conditionally
Rendering components based on logic
Rendering APIs
Rendering hooks

Explanation: Conditional rendering shows components based on conditions.

Question 19: Which operator is commonly used for conditional rendering in JSX?

Explanation: Logical && is commonly used for conditional rendering.

Question 20: What happens when props change in a component?

Component unmounts
Component re-renders
State resets
Nothing happens

Explanation: A component re-renders when its props change.

Question 21: Which hook is useful for expensive calculations?

useEffect
useCallback
useMemo
useRef

Explanation: useMemo caches expensive computations.

Question 22: What is the role of React StrictMode?

Improve UI
Detect potential issues
Optimize performance
Manage routing

Explanation: StrictMode highlights potential problems in development.

Question 23: What does event.preventDefault() do in React forms?

Stops state update
Prevents page reload
Resets form
Stops rendering

Explanation: It prevents the default browser behavior like form submission reload.

Question 24: What is an uncontrolled component?

Uses Redux
Uses refs instead of state
Has no props
Has no JSX

Explanation: Uncontrolled components rely on refs for form values.

Question 25: Which hook replaces shouldComponentUpdate logic?

useEffect
useCallback
React.memo
useContext

Explanation: React.memo prevents unnecessary re-renders.

Question 26: What is reconciliation in React?

State reset process
DOM update algorithm
Event handling
Routing logic

Explanation: Reconciliation compares virtual DOM changes to update the real DOM.

Question 27: Which hook executes synchronously after DOM mutations?

useEffect
useLayoutEffect
useMemo
useRef

Explanation: useLayoutEffect runs synchronously after DOM updates.

Question 28: What is the purpose of React.Fragment?

Styling
Grouping elements
State sharing
API handling

Explanation: Fragments group elements without adding extra DOM nodes.

Question 29: Which pattern helps share logic between components?

Higher-order components
Fragments
Keys
Refs

Explanation: HOCs allow logic reuse across components.

Question 30: What does useReducer improve over useState?

Simple state updates
Complex state logic handling
Styling
Routing

Explanation: useReducer is better for complex state transitions.

Question 31: What is a higher-order component?

Component returning JSX
Component returning another component
Component with hooks
Component with state

Explanation: HOCs wrap components to add extra functionality.

Question 32: Why should side effects not be placed directly in render?

Syntax errors
Infinite re-renders
No DOM access
Performance loss

Explanation: Side effects in render can cause infinite loops.

Question 33: Which hook is best for managing form input state?

useEffect
useState
useRef
useContext

Explanation: useState is commonly used for form input handling.

Question 34: What is lazy loading in React?

Loading data early
Deferring component loading
Blocking rendering
Caching state

Explanation: Lazy loading defers component loading until needed.

Question 35: Which function supports lazy loading?

React.memo
React.lazy
useMemo
Suspense only

Explanation: React.lazy enables component-level lazy loading.

Question 36: What is Suspense used for?

State handling
Error handling
Fallback UI during loading
Routing

Explanation: Suspense displays fallback UI while loading components.

Question 37: What causes a component to re-render?

Props or state change
Function call
Console log
CSS change

Explanation: Changes in props or state trigger re-renders.

Question 38: Which hook is ideal for storing previous props?

useState
useEffect
useRef
useMemo

Explanation: useRef can persist previous values across renders.

Question 39: What does React Router enable?

API calls
Client-side navigation
State management
Styling

Explanation: React Router enables navigation without page reloads.

Question 40: Why is immutability important in React?

Security reasons
Efficient change detection
Faster JavaScript
Memory saving

Explanation: Immutability helps React detect changes efficiently.

Question 41: Which hook runs before browser paint?

useEffect
useLayoutEffect
useCallback
useMemo

Explanation: useLayoutEffect runs before the browser paints.

Question 42: What is the purpose of cleanup function in useEffect?

Update state
Remove side effects
Re-render component
Fetch data

Explanation: Cleanup functions remove subscriptions or listeners.

Question 43: Which concept helps avoid unnecessary re-renders?

Prop drilling
Memoization
DOM manipulation
Inline functions

Explanation: Memoization prevents redundant renders.

Question 44: What is the main benefit of component reusability?

More code
Faster development
Complex logic
More files

Explanation: Reusable components speed up development and maintenance.

Question 45: What does exporting a component allow?

State sharing
Component reuse in other files
DOM access
Hook usage

Explanation: Exporting allows components to be reused across files.

Back to programming Quizzes

React JS Quiz ( Intermediate )

Questions

~10

Minutes

Min Limit