Master In-Demand Tech. Get Paid

react MCQ Mock Test

120 Questions • 20 Seconds / Question

⏱ 00:20

Q 1/120

react MCQs with Answers

1. Hooks were introduced in which React version?

A. 15
B. 16.8
C. 17
D. 18

Correct: B

Explanation: Hooks were introduced in React 16.8.

2. Best practice in React?

A. Mutate state
B. Lift state up
C. Use index as key
D. Direct DOM manipulation

Correct: B

Explanation: Lifting state improves design.

3. SSR stands for?

A. Server Side Rendering
B. Static Style Rendering
C. Simple State Rendering
D. None

Correct: A

Explanation: SSR renders on server.

4. Virtual DOM is?

A. Real DOM
B. Copy of DOM
C. Browser API
D. Database

Correct: B

Explanation: Virtual DOM is lightweight copy.

5. Why use React.Fragment?

A. Avoid extra DOM
B. Routing
C. State
D. CSS

Correct: A

Explanation: Fragments avoid extra DOM nodes.

6. State in React is?

A. Immutable
B. Mutable
C. Read-only
D. Static

Correct: B

Explanation: State can be changed.

7. Hydration means?

A. Attach events to SSR HTML
B. Clear DOM
C. Update CSS
D. Reload page

Correct: A

Explanation: Hydration connects React to HTML.

8. React.lazy is used for?

A. Routing
B. Code splitting
C. State
D. API

Correct: B

Explanation: Lazy loads components.

9. Which library is used for routing?

A. Redux
B. React Router
C. Axios
D. Formik

Correct: B

Explanation: React Router handles routing.

10. Which type of component uses hooks?

A. Class component
B. Functional component
C. Pure component
D. Abstract component

Correct: B

Explanation: Hooks are used in functional components.

11. Why are keys used in React lists?

A. Styling
B. Performance & reconciliation
C. Routing
D. Debugging

Correct: B

Explanation: Keys help React identify elements.

12. Which component is used for navigation?

A. Link
B. Nav
C. Router
D. Switch

Correct: A

Explanation: Link navigates between routes.

13. Which library is used for routing?

A. Redux
B. React Router
C. Axios
D. Formik

Correct: B

Explanation: React Router handles routing.

14. SSR stands for?

A. Server Side Rendering
B. Static Style Rendering
C. Simple State Rendering
D. None

Correct: A

Explanation: SSR renders on server.

15. Suspense is used with?

A. Lazy
B. Redux
C. Router
D. Forms

Correct: A

Explanation: Suspense works with lazy loading.

16. Who developed React?

A. Google
B. Facebook
C. Microsoft
D. Amazon

Correct: B

Explanation: React was developed by Facebook.

17. What causes a re-render?

A. Props change
B. State change
C. Both A and B
D. None

Correct: C

Explanation: Both props and state trigger re-render.

18. Which hook runs side effects?

A. useState
B. useEffect
C. useCallback
D. useReducer

Correct: B

Explanation: useEffect handles side effects.

19. Who developed React?

A. Google
B. Facebook
C. Microsoft
D. Amazon

Correct: B

Explanation: React was developed by Facebook.

20. Concurrent rendering improves?

A. UX
B. Performance
C. Responsiveness
D. All of the above

Correct: D

Explanation: Improves overall experience.

21. Event handlers should be?

A. String
B. Function
C. Boolean
D. Object

Correct: B

Explanation: Handlers must be functions.

22. SSR improves?

A. SEO
B. Initial load
C. Performance
D. All of the above

Correct: D

Explanation: SSR improves all.

23. Redux follows which pattern?

A. MVC
B. MVP
C. Flux
D. Observer

Correct: C

Explanation: Redux follows Flux architecture.

24. Why use React.Fragment?

A. Avoid extra DOM
B. Routing
C. State
D. CSS

Correct: A

Explanation: Fragments avoid extra DOM nodes.

25. Which hook runs side effects?

A. useState
B. useEffect
C. useCallback
D. useReducer

Correct: B

Explanation: useEffect handles side effects.

26. useRef is used for?

A. State
B. DOM access
C. Routing
D. API calls

Correct: B

Explanation: useRef accesses DOM elements.

27. State updates are?

A. Synchronous
B. Asynchronous
C. Blocking
D. Immediate

Correct: B

Explanation: State updates are async.

28. Redux store is?

A. Mutable
B. Immutable
C. Optional
D. Async

Correct: B

Explanation: Redux state is immutable.

29. Props in React are?

A. Mutable
B. Immutable
C. Global
D. Optional

Correct: B

Explanation: Props are read-only.

30. Which hook consumes context?

A. useContext
B. useState
C. useMemo
D. useRef

Correct: A

Explanation: useContext reads context values.

31. Which component catches errors?

A. ErrorBoundary
B. TryCatch
C. CatchError
D. SafeComponent

Correct: A

Explanation: Error Boundaries catch errors.

32. Which hook is used for state?

A. useEffect
B. useState
C. useRef
D. useMemo

Correct: B

Explanation: useState is used for state management.

33. React Testing Library focuses on?

A. Implementation
B. User behavior
C. DOM internals
D. CSS

Correct: B

Explanation: It tests user behavior.

34. Event handlers should be?

A. String
B. Function
C. Boolean
D. Object

Correct: B

Explanation: Handlers must be functions.

35. How do you conditionally render JSX?

A. if/else
B. ternary operator
C. logical &&
D. All of the above

Correct: D

Explanation: All methods can be used.

36. Which prop inserts raw HTML?

A. dangerouslySetInnerHTML
B. setHTML
C. innerHTML
D. html()

Correct: A

Explanation: Used with caution.

37. useParams is used to?

A. Navigate
B. Access route params
C. Fetch data
D. Redirect

Correct: B

Explanation: useParams reads URL params.

38. How do you conditionally render JSX?

A. if/else
B. ternary operator
C. logical &&
D. All of the above

Correct: D

Explanation: All methods can be used.

39. What is React?

A. A database
B. A JavaScript library for building UI
C. A backend framework
D. A programming language

Correct: B

Explanation: React is a JavaScript library used to build user interfaces.

40. Hooks should be called?

A. Inside loops
B. Inside conditions
C. At top level
D. Anywhere

Correct: C

Explanation: Hooks must be called at top level.

41. Context API is used for?

A. Routing
B. Global state
C. Styling
D. Forms

Correct: B

Explanation: Context provides global data.

42. Context API is used for?

A. Routing
B. Global state
C. Styling
D. Forms

Correct: B

Explanation: Context provides global data.

43. Props in React are?

A. Mutable
B. Immutable
C. Global
D. Optional

Correct: B

Explanation: Props are read-only.

44. useReducer is alternative to?

A. useState
B. useEffect
C. useRef
D. useMemo

Correct: A

Explanation: useReducer manages complex state.

45. Portals are used for?

A. Modals & overlays
B. Routing
C. State
D. API

Correct: A

Explanation: Portals render outside root.

46. componentWillUnmount is used for?

A. Rendering
B. Cleanup
C. State update
D. Props update

Correct: B

Explanation: Used for cleanup.

47. Which lifecycle method runs after render?

A. componentWillMount
B. componentDidMount
C. componentWillUpdate
D. shouldComponentUpdate

Correct: B

Explanation: componentDidMount runs after render.

48. useEffect cleanup runs?

A. Before unmount
B. After render
C. Before next effect
D. Both A and C

Correct: D

Explanation: Cleanup runs before re-run & unmount.

49. What is a React component?

A. A CSS file
B. A reusable UI block
C. A database table
D. A JS loop

Correct: B

Explanation: Components are reusable building blocks.

50. useCallback is used to?

A. Cache values
B. Cache functions
C. Update DOM
D. Handle routing

Correct: B

Explanation: useCallback memoizes functions.

51. Which library is used for testing React?

A. Jest
B. Mocha
C. Chai
D. All of the above

Correct: D

Explanation: All can be used.

52. State updates are?

A. Synchronous
B. Asynchronous
C. Blocking
D. Immediate

Correct: B

Explanation: State updates are async.

53. React batches state updates to?

A. Reduce renders
B. Increase memory
C. Debug
D. Delay UI

Correct: A

Explanation: Batching improves performance.

54. React Testing Library focuses on?

A. Implementation
B. User behavior
C. DOM internals
D. CSS

Correct: B

Explanation: It tests user behavior.

55. Reconciliation means?

A. Comparing DOM trees
B. Routing
C. State update
D. Styling

Correct: A

Explanation: React compares Virtual DOM.

56. Portals are used for?

A. Modals & overlays
B. Routing
C. State
D. API

Correct: A

Explanation: Portals render outside root.

57. React batches state updates to?

A. Reduce renders
B. Increase memory
C. Debug
D. Delay UI

Correct: A

Explanation: Batching improves performance.

58. What causes a re-render?

A. Props change
B. State change
C. Both A and B
D. None

Correct: C

Explanation: Both props and state trigger re-render.

59. Why are keys used in React lists?

A. Styling
B. Performance & reconciliation
C. Routing
D. Debugging

Correct: B

Explanation: Keys help React identify elements.

60. Hooks were introduced in which React version?

A. 15
B. 16.8
C. 17
D. 18

Correct: B

Explanation: Hooks were introduced in React 16.8.

61. Which tool bundles React apps?

A. Webpack
B. Vite
C. Parcel
D. All of the above

Correct: D

Explanation: All can bundle React apps.

62. Using index as key is?

A. Recommended
B. Bad practice sometimes
C. Mandatory
D. Ignored

Correct: B

Explanation: Index keys can cause issues.

63. What is JSX?

A. JavaScript XML
B. JSON syntax
C. HTML template engine
D. CSS preprocessor

Correct: A

Explanation: JSX stands for JavaScript XML.

64. useReducer is alternative to?

A. useState
B. useEffect
C. useRef
D. useMemo

Correct: A

Explanation: useReducer manages complex state.

65. Which hook is used for state?

A. useEffect
B. useState
C. useRef
D. useMemo

Correct: B

Explanation: useState is used for state management.

66. Using index as key is?

A. Recommended
B. Bad practice sometimes
C. Mandatory
D. Ignored

Correct: B

Explanation: Index keys can cause issues.

67. Which component is used for navigation?

A. Link
B. Nav
C. Router
D. Switch

Correct: A

Explanation: Link navigates between routes.

68. Which attribute is used to handle input change?

A. onClick
B. onSubmit
C. onChange
D. onLoad

Correct: C

Explanation: onChange tracks input changes.

69. useRef is used for?

A. State
B. DOM access
C. Routing
D. API calls

Correct: B

Explanation: useRef accesses DOM elements.

70. Redux is used for?

A. Routing
B. State management
C. Styling
D. Forms

Correct: B

Explanation: Redux manages global state.

71. React.memo is used for?

A. Memoizing functions
B. Prevent re-render
C. Routing
D. State update

Correct: B

Explanation: Prevents unnecessary re-renders.

72. Controlled component means?

A. DOM controls data
B. React controls data
C. Browser controls data
D. None

Correct: B

Explanation: React controls form state.

73. Which styling method is valid?

A. CSS
B. Inline styles
C. Styled-components
D. All of the above

Correct: D

Explanation: React supports all.

74. State in React is?

A. Immutable
B. Mutable
C. Read-only
D. Static

Correct: B

Explanation: State can be changed.

75. Virtual DOM is?

A. Real DOM
B. Copy of DOM
C. Browser API
D. Database

Correct: B

Explanation: Virtual DOM is lightweight copy.

76. Which type of component uses hooks?

A. Class component
B. Functional component
C. Pure component
D. Abstract component

Correct: B

Explanation: Hooks are used in functional components.

77. Hydration means?

A. Attach events to SSR HTML
B. Clear DOM
C. Update CSS
D. Reload page

Correct: A

Explanation: Hydration connects React to HTML.

78. React.lazy is used for?

A. Routing
B. Code splitting
C. State
D. API

Correct: B

Explanation: Lazy loads components.

79. useEffect cleanup runs?

A. Before unmount
B. After render
C. Before next effect
D. Both A and C

Correct: D

Explanation: Cleanup runs before re-run & unmount.

80. componentWillUnmount is used for?

A. Rendering
B. Cleanup
C. State update
D. Props update

Correct: B

Explanation: Used for cleanup.

81. Which tool bundles React apps?

A. Webpack
B. Vite
C. Parcel
D. All of the above

Correct: D

Explanation: All can bundle React apps.

82. React prevents XSS by?

A. Escaping values
B. Sanitizing HTML
C. Blocking scripts
D. None

Correct: A

Explanation: React escapes values.

83. React.StrictMode is used for?

A. Production build
B. Detect issues
C. Performance
D. Routing

Correct: B

Explanation: Helps detect potential problems.

84. StrictMode runs effects?

A. Once
B. Twice in dev
C. Never
D. Only prod

Correct: B

Explanation: StrictMode double invokes in dev.

85. Redux store is?

A. Mutable
B. Immutable
C. Optional
D. Async

Correct: B

Explanation: Redux state is immutable.

86. SSR improves?

A. SEO
B. Initial load
C. Performance
D. All of the above

Correct: D

Explanation: SSR improves all.

87. What is React?

A. A database
B. A JavaScript library for building UI
C. A backend framework
D. A programming language

Correct: B

Explanation: React is a JavaScript library used to build user interfaces.

88. useMemo is used to?

A. Cache values
B. Cache functions
C. Update DOM
D. Fetch API

Correct: A

Explanation: useMemo memoizes computed values.

89. JSX is converted to which function?

A. createElement()
B. ReactDOM.render()
C. Component()
D. JSX.parse()

Correct: A

Explanation: JSX is converted to React.createElement().

90. Concurrent rendering improves?

A. UX
B. Performance
C. Responsiveness
D. All of the above

Correct: D

Explanation: Improves overall experience.

91. React uses which event system?

A. Native
B. Synthetic
C. Browser
D. Custom

Correct: B

Explanation: React uses synthetic events.

92. useMemo is used to?

A. Cache values
B. Cache functions
C. Update DOM
D. Fetch API

Correct: A

Explanation: useMemo memoizes computed values.

93. What is a React component?

A. A CSS file
B. A reusable UI block
C. A database table
D. A JS loop

Correct: B

Explanation: Components are reusable building blocks.

94. Reconciliation means?

A. Comparing DOM trees
B. Routing
C. State update
D. Styling

Correct: A

Explanation: React compares Virtual DOM.

95. Which attribute is used to handle input change?

A. onClick
B. onSubmit
C. onChange
D. onLoad

Correct: C

Explanation: onChange tracks input changes.

96. Best practice in React?

A. Mutate state
B. Lift state up
C. Use index as key
D. Direct DOM manipulation

Correct: B

Explanation: Lifting state improves design.

97. Hooks should be called?

A. Inside loops
B. Inside conditions
C. At top level
D. Anywhere

Correct: C

Explanation: Hooks must be called at top level.

98. React uses which event system?

A. Native
B. Synthetic
C. Browser
D. Custom

Correct: B

Explanation: React uses synthetic events.

99. Controlled component means?

A. DOM controls data
B. React controls data
C. Browser controls data
D. None

Correct: B

Explanation: React controls form state.

100. Why use key prop?

A. Styling
B. Performance
C. Routing
D. Testing

Correct: B

Explanation: Keys optimize rendering.

101. What is JSX?

A. JavaScript XML
B. JSON syntax
C. HTML template engine
D. CSS preprocessor

Correct: A

Explanation: JSX stands for JavaScript XML.

102. useTransition is used for?

A. State
B. Non-blocking UI
C. Routing
D. API

Correct: B

Explanation: Helps keep UI responsive.

103. Redux follows which pattern?

A. MVC
B. MVP
C. Flux
D. Observer

Correct: C

Explanation: Redux follows Flux architecture.

104. Which library is used for testing React?

A. Jest
B. Mocha
C. Chai
D. All of the above

Correct: D

Explanation: All can be used.

105. Which hook consumes context?

A. useContext
B. useState
C. useMemo
D. useRef

Correct: A

Explanation: useContext reads context values.

106. Suspense is used with?

A. Lazy
B. Redux
C. Router
D. Forms

Correct: A

Explanation: Suspense works with lazy loading.

107. Which component catches errors?

A. ErrorBoundary
B. TryCatch
C. CatchError
D. SafeComponent

Correct: A

Explanation: Error Boundaries catch errors.

108. Why use key prop?

A. Styling
B. Performance
C. Routing
D. Testing

Correct: B

Explanation: Keys optimize rendering.

109. useCallback is used to?

A. Cache values
B. Cache functions
C. Update DOM
D. Handle routing

Correct: B

Explanation: useCallback memoizes functions.

110. React.StrictMode is used for?

A. Production build
B. Detect issues
C. Performance
D. Routing

Correct: B

Explanation: Helps detect potential problems.

111. Which styling method is valid?

A. CSS
B. Inline styles
C. Styled-components
D. All of the above

Correct: D

Explanation: React supports all.

112. Which prop inserts raw HTML?

A. dangerouslySetInnerHTML
B. setHTML
C. innerHTML
D. html()

Correct: A

Explanation: Used with caution.

113. Redux is used for?

A. Routing
B. State management
C. Styling
D. Forms

Correct: B

Explanation: Redux manages global state.

114. Which lifecycle method runs after render?

A. componentWillMount
B. componentDidMount
C. componentWillUpdate
D. shouldComponentUpdate

Correct: B

Explanation: componentDidMount runs after render.

115. React.memo is used for?

A. Memoizing functions
B. Prevent re-render
C. Routing
D. State update

Correct: B

Explanation: Prevents unnecessary re-renders.

116. React prevents XSS by?

A. Escaping values
B. Sanitizing HTML
C. Blocking scripts
D. None

Correct: A

Explanation: React escapes values.

117. useTransition is used for?

A. State
B. Non-blocking UI
C. Routing
D. API

Correct: B

Explanation: Helps keep UI responsive.

118. useParams is used to?

A. Navigate
B. Access route params
C. Fetch data
D. Redirect

Correct: B

Explanation: useParams reads URL params.

119. StrictMode runs effects?

A. Once
B. Twice in dev
C. Never
D. Only prod

Correct: B

Explanation: StrictMode double invokes in dev.

120. JSX is converted to which function?

A. createElement()
B. ReactDOM.render()
C. Component()
D. JSX.parse()

Correct: A

Explanation: JSX is converted to React.createElement().

react MCQ Mock Test

Your Performance

react MCQs with Answers

1. Hooks were introduced in which React version?

2. Best practice in React?

3. SSR stands for?

4. Virtual DOM is?

5. Why use React.Fragment?

6. State in React is?

7. Hydration means?

8. React.lazy is used for?

9. Which library is used for routing?

10. Which type of component uses hooks?

11. Why are keys used in React lists?

12. Which component is used for navigation?

13. Which library is used for routing?

14. SSR stands for?

15. Suspense is used with?

16. Who developed React?

17. What causes a re-render?

18. Which hook runs side effects?

19. Who developed React?

20. Concurrent rendering improves?

21. Event handlers should be?

22. SSR improves?

23. Redux follows which pattern?

24. Why use React.Fragment?

25. Which hook runs side effects?

26. useRef is used for?

27. State updates are?

28. Redux store is?

29. Props in React are?

30. Which hook consumes context?

31. Which component catches errors?

32. Which hook is used for state?

33. React Testing Library focuses on?

34. Event handlers should be?

35. How do you conditionally render JSX?

36. Which prop inserts raw HTML?

37. useParams is used to?

38. How do you conditionally render JSX?

39. What is React?

40. Hooks should be called?

41. Context API is used for?

42. Context API is used for?

43. Props in React are?

44. useReducer is alternative to?

45. Portals are used for?

46. componentWillUnmount is used for?

47. Which lifecycle method runs after render?

48. useEffect cleanup runs?

49. What is a React component?

50. useCallback is used to?

51. Which library is used for testing React?

52. State updates are?

53. React batches state updates to?

54. React Testing Library focuses on?

55. Reconciliation means?

56. Portals are used for?

57. React batches state updates to?

58. What causes a re-render?

59. Why are keys used in React lists?

60. Hooks were introduced in which React version?

61. Which tool bundles React apps?

62. Using index as key is?

63. What is JSX?

64. useReducer is alternative to?

65. Which hook is used for state?

66. Using index as key is?

67. Which component is used for navigation?

68. Which attribute is used to handle input change?

69. useRef is used for?

70. Redux is used for?

71. React.memo is used for?

72. Controlled component means?

73. Which styling method is valid?

74. State in React is?

75. Virtual DOM is?

76. Which type of component uses hooks?

77. Hydration means?