React Hooks Quiz ( Beginner ) - All Questions

This easy-level React Hooks quiz is perfect for beginners who want to understand the fundamentals of hooks like useState, useEffect, useRef, and useContext. It helps learners build a strong foundation in modern React development with clear, practical MCQs.

Question 1: What are React Hooks?

Classes in React
Functions that let you use state and lifecycle features
CSS utilities
Routing tools

Explanation: Hooks allow functional components to use state and other React features.

Question 2: Which version of React introduced Hooks?

15.0
16.8
17.0
18.0

Explanation: Hooks were introduced in React 16.8.

Question 3: Which hook is used to add state to a functional component?

useEffect
useRef
useState
useMemo

Explanation: useState is used to manage state in functional components.

Question 4: What does useState return?

Only state
Only setter function
State and setter function
Boolean value

Explanation: useState returns the current state and a function to update it.

Question 5: Which hook is used to perform side effects?

useState
useEffect
useContext
useReducer

Explanation: useEffect is used for side effects like data fetching and subscriptions.

Question 6: When does useEffect run by default?

Only once
After every render
Before render
Only on unmount

Explanation: Without dependencies, useEffect runs after every render.

Question 7: Which hook is used to access DOM elements directly?

useState
useRef
useEffect
useMemo

Explanation: useRef can reference DOM elements directly.

Question 8: What value does useRef return?

A number
A DOM node
An object with a current property
A function

Explanation: useRef returns an object with a mutable current property.

Question 9: Which hook helps share data without prop drilling?

useState
useEffect
useContext
useRef

Explanation: useContext allows sharing data across components.

Question 10: What does useContext consume?

Props
State
Context value
Reducer

Explanation: useContext returns the current context value.

Question 11: Can hooks be used inside class components?

Yes
No
Only useState
Only useEffect

Explanation: Hooks can only be used in functional components.

Question 12: Which rule must hooks always follow?

Call hooks conditionally
Call hooks at top level
Call hooks in loops
Call hooks in classes

Explanation: Hooks must be called at the top level of components.

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

No effect
Warning only
Runtime error
State resets silently

Explanation: React relies on hook order and throws errors if it changes.

Question 14: Which hook is used to optimize performance by memoizing values?

useCallback
useEffect
useMemo
useRef

Explanation: useMemo memoizes computed values.

Question 15: Which hook memoizes functions?

useMemo
useCallback
useEffect
useState

Explanation: useCallback memoizes function references.

Question 16: What is the dependency array used for in useEffect?

Styling
Controlling effect execution
State storage
Routing

Explanation: It controls when the effect runs.

Question 17: What does an empty dependency array in useEffect mean?

Effect never runs
Effect runs only once
Effect runs twice
Effect runs on unmount

Explanation: An empty array makes the effect run only once after mount.

Question 18: Which hook is best for managing complex state logic?

useState
useEffect
useReducer
useRef

Explanation: useReducer is suited for complex state transitions.

Question 19: What does useReducer return?

State only
Dispatch only
State and dispatch
Reducer function

Explanation: useReducer returns the current state and a dispatch function.

Question 20: Which hook can replace componentDidMount?

useState
useEffect
useRef
useContext

Explanation: useEffect with empty dependency array replaces componentDidMount.

Question 21: Which hook runs before the browser paints the screen?

useEffect
useLayoutEffect
useMemo
useRef

Explanation: useLayoutEffect runs synchronously before paint.

Question 22: Which hook is used to store mutable values without re-render?

useState
useRef
useEffect
useMemo

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

Question 23: Which hook helps delay non-urgent UI updates?

useEffect
useTransition
useMemo
useRef

Explanation: useTransition helps manage non-urgent updates.

Question 24: Which hook is used for external store subscriptions?

useEffect
useReducer
useSyncExternalStore
useContext

Explanation: useSyncExternalStore is designed for external subscriptions.

Question 25: What must hooks always start with?

get
set
use
react

Explanation: Hook names must start with 'use'.

Question 26: Can you create your own hooks?

No
Yes
Only class components
Only React core team

Explanation: Custom hooks can be created to reuse logic.

Question 27: What is a custom hook?

Built-in hook
Reusable hook logic
Class component
Context provider

Explanation: Custom hooks encapsulate reusable hook logic.

Question 28: Which hook is best for API calls?

useState
useEffect
useMemo
useCallback

Explanation: API calls are side effects handled by useEffect.

Question 29: Which hook is used to avoid prop drilling?

useState
useContext
useRef
useEffect

Explanation: useContext helps avoid passing props deeply.

Question 30: What happens if useEffect cleanup is missing?

Syntax error
Memory leak
State reset
No issue

Explanation: Missing cleanup can cause memory leaks.

Question 31: Which hook is useful for caching derived data?

useMemo
useEffect
useState
useRef

Explanation: useMemo caches derived values.

Question 32: Which hook is used to persist previous values?

useState
useEffect
useRef
useMemo

Explanation: useRef persists values across renders.

Question 33: Which hook replaces shouldComponentUpdate?

useMemo
useCallback
React.memo
useEffect

Explanation: React.memo helps prevent unnecessary re-renders.

Question 34: Which hook helps isolate side effects logic?

useContext
useReducer
Custom hooks
useRef

Explanation: Custom hooks isolate and reuse side-effect logic.

Question 35: Which hook should not be called conditionally?

useState
useEffect
useContext
All hooks

Explanation: All hooks must be called unconditionally.

Question 36: What is the main advantage of hooks?

More syntax
Less reusable code
Logic reuse in functions
Class dependency

Explanation: Hooks enable logic reuse in functional components.

Question 37: Which hook helps with performance optimization?

useEffect
useMemo
useContext
useState

Explanation: useMemo improves performance by memoizing values.

Question 38: Which hook is used to control re-renders of child components?

useCallback
useRef
useEffect
useContext

Explanation: useCallback stabilizes function references passed as props.

Question 39: Which hook runs synchronously after DOM updates?

useEffect
useLayoutEffect
useMemo
useRef

Explanation: useLayoutEffect runs synchronously after DOM changes.

Question 40: Which hook helps defer expensive rendering?

useMemo
useTransition
useRef
useContext

Explanation: useTransition defers non-urgent rendering.

Question 41: Which hook is best for form input handling?

useRef
useEffect
useState
useMemo

Explanation: useState is commonly used to manage form input values.

Question 42: Which hook helps synchronize external state?

useEffect
useReducer
useSyncExternalStore
useContext

Explanation: useSyncExternalStore syncs external store state.

Question 43: What is the main rule of hooks?

Use in classes
Call conditionally
Call at top level
Call inside loops

Explanation: Hooks must be called at the top level.

Question 44: Which hook is best for managing timers?

useEffect
useState
useMemo
useContext

Explanation: Timers are side effects handled in useEffect.

Question 45: Which hook allows sharing logic without HOCs?

useContext
useReducer
Custom hooks
useRef

Explanation: Custom hooks replace many HOC use cases.

Question 46: Which hook helps avoid stale state issues?

useMemo
Functional state updater
useRef
useContext

Explanation: Functional updates ensure latest state usage.

Question 47: Which hook is ideal for focus management?

useState
useEffect
useRef
useContext

Explanation: useRef is ideal for managing focus on elements.

Question 48: Which hook makes React code more reusable?

useState
useEffect
Custom hooks
useContext

Explanation: Custom hooks improve logic reusability.

Question 49: Which hook helps reduce unnecessary renders?

useMemo
useEffect
useContext
useState

Explanation: useMemo avoids recalculating values unnecessarily.

Back to programming Quizzes

React Hooks Quiz ( Beginner )

Questions

~15

Minutes

Min Limit