60 React Objective Type Quiz & MCQs with Answers for Interview Preparation | Gyansetu

Practice these MCQs to strengthen your React.js knowledge and prepare confidently for job interviews or certification exams.
Whether you’re aiming to become a front-end specialist, a full-stack developer, or simply sharpen your skills in component-based architecture, state management, and modern React practices — you’re in the right place.
60+ React MCQs covering everything from JSX, props, state, hooks, event handling, forms, routing, Redux, and advanced concepts — complete with answers to help you test and solidify your understanding, no guesswork involved.

Section 1: React Fundamentals – 10 MCQs

1. What is React primarily used for?
   A. Styling web pages
   B. Building user interfaces
   C. Managing databases
   D. Server-side routing
   ✅ Answer: B
2. React is a…
   A. Framework
   B. Library
   C. Language
   D. Plugin
   ✅ Answer: B
3. Which command is used to create a new React app using Create React App?
   A. react create app
   B. npx create-react-app myApp
   C. npm install react-app
   D. react-new myApp
   ✅ Answer: B
4. What is JSX?
   A. JavaScript Extension
   B. XML-based language
   C. Syntax extension for JavaScript
   D. A server-side technology
   ✅ Answer: C
5. Which of the following is a correct JSX syntax?

A. const title = <h1>”Hello”</h1>; 

B. const title = <h1>Hello</h1>; 

C. const title = <h1>Hello”;</h1> 

D. const title = <h1>Hello>;

✅ Answer: B

6. Which keyword creates a class component in React?
   A. createComponent
   B. function
   C. component
   D. class
   ✅ Answer: D
7. What function converts JSX into JavaScript?
   A. ReactDOM
   B. Webpack
   C. Babel
   D. JSXify
   ✅ Answer: C
8. React applications must have a single…
   A. Component
   B. render method
   C. root element
   D. class
   ✅ Answer: C
9. What will this render?

const element = <h1>5 + 5 = {5 + 5}</h1>;

A. 5 + 5 = 10
B. 5 + 5 = {10}
C. 5 + 5 = 5 + 5
D. Compilation error
✅ Answer: A

10. React uses which programming paradigm?
    A. Procedural
    B. Functional
    C. Logical
    D. OOP only
    ✅ Answer: B

---

Section 2: Components & Props – 10 MCQs

11. Which of the following is a valid functional component?

A. function App() { return <h1>Hello</h1>; } 

B. const App = () => <h1>Hello</h1>; 

C. Both A & B 

D. Neither A nor B 

✅ Answer: C

12. Props in React are…
    A. Mutable
    B. Global variables
    C. Immutable
    D. Functions
    ✅ Answer: C
13. Which of the following passes title prop correctly?

<MyComponent title=”Welcome” /> 

A. True
B. False
✅ Answer: A

14. How are props accessed inside a component?
    A. this.props.name
    B. props.name
    C. this.name
    D. component.props.name
    ✅ Answer: A (for class components)
15. What will be output of this?

function Greet({ name }) {

  return <h1>Hello {name}</h1>;

}

<Greet name=”React” />

A. Hello name
B. Hello Greet
C. Hello React
D. Error
✅ Answer: C

16. Which method renders content on screen in a class component?
    A. display()
    B. view()
    C. render()
    D. return()
    ✅ Answer: C
17. Which of the following is NOT a valid component name?
    A. MyComponent
    B. App1
    C. myComponent
    D. Header
    ✅ Answer: C
18. Props can be…
    A. Modified within the component
    B. Passed from parent to child
    C. Shared across components automatically
    D. Defined in return statement
    ✅ Answer: B
19. Which of the following is true about React components?
    A. Must return a single root element
    B. Can return multiple root elements
    C. Cannot have props
    D. Must use class only
    ✅ Answer: A
20. In React, a component must return…
    A. A string
    B. A number
    C. A single JSX element
    D. Nothing
    ✅ Answer: C

---

Section 3: State and Hooks – 10 MCQs

21. Which hook is used to manage state in a functional component?
    A. useEffect()
    B. useState()
    C. useProps()
    D. useRef()
    ✅ Answer: B
22. What does useState(0) return?
    A. A number
    B. An object
    C. An array with initial state and setter
    D. Null
    ✅ Answer: C
23. What is wrong with this code?

const [count, setCount] = useState;

A. Nothing
B. useState is not a function
C. Missing parentheses
D. useState is undefined
✅ Answer: C

24. Where can useState be used?
    A. Inside loops
    B. Inside conditions
    C. Only inside React functional components
    D. Anywhere
    ✅ Answer: C
25. Which hook runs after every render?
    A. useProps()
    B. useEffect()
    C. useState()
    D. useMemo()
    ✅ Answer: B
26. Which statement is true about state in class components?
    A. It’s immutable
    B. It can be accessed with this.state
    C. It can be changed directly
    D. Cannot use it
    ✅ Answer: B
27. How do you update state in a class component?
    A. this.setState({})
    B. this.state.update()
    C. setState()
    D. this.props.setState()
    ✅ Answer: A
28. How can you initialize multiple state variables in functional components?
    A. One useState per variable
    B. Use object
    C. Use setState
    D. Use useEffect
    ✅ Answer: A
29. What is the use of useRef() hook?
    A. Track render count
    B. Control DOM nodes
    C. Control form elements
    D. All of the above
    ✅ Answer: D
30. Which hook is used for side effects like API calls?
    A. useState()
    B. useEffect()
    C. useContext()
    D. useRef()
    ✅ Answer: B

Section 4: Event Handling & Forms – 10 MCQs

31. How do you handle a button click event in React?

<button onClick={handleClick}>Click</button>

A. True
B. False
✅ Answer: A

32. Which event handler is used for form submission in React?
    A. onSubmit
    B. submitForm
    C. onSend
    D. handleForm
    ✅ Answer: A
33. What should be called to prevent page reload on form submit?
    A. stopSubmit()
    B. event.preventDefault()
    C. preventEvent()
    D. return false
    ✅ Answer: B
34. What will this input capture?

<input type=”text” value={name} onChange={e => setName(e.target.value)} />

A. Prevents change
B. Controlled input
C. Uncontrolled input
D. Invalid input
✅ Answer: B

35. In controlled components, form data is handled by…
    A. DOM
    B. State
    C. Props
    D. Event
    ✅ Answer: B
36. What is required for two-way binding in React?
    A. value only
    B. onChange only
    C. value and onChange
    D. bind()
    ✅ Answer: C
37. Which input type is NOT natively supported in React forms?
    A. text
    B. email
    C. password
    D. All are supported
    ✅ Answer: D
38. What’s wrong with this code?

<input value=”text” />

A. Nothing
B. It will throw an error
C. Missing onChange
D. Cannot bind value directly
✅ Answer: C

39. How do you access form values using uncontrolled components?
    A. useState
    B. onSubmit
    C. ref
    D. props
    ✅ Answer: C
40. What’s the output?

<form onSubmit={() => alert(“submitted”)}>

  <button type=”submit”>Submit</button>

</form>

A. Alert on button click
B. Error
C. Nothing
D. Infinite loop
✅ Answer: A

---

Section 5: Routing – 5 MCQs

41. Which package is used for routing in React?
    A. react-router-dom
    B. react-path
    C. react-navigation
    D. react-router
    ✅ Answer: A
42. What does <BrowserRouter> do?
    A. Fetches HTML
    B. Enables client-side routing
    C. Connects Redux
    D. Adds async support
    ✅ Answer: B
43. Which component defines individual route paths?
    A. <Router>
    B. <Route>
    C. <Link>
    D. <Switch>
    ✅ Answer: B
44. How do you navigate between pages in React Router?
    A. navigate()
    B. <a href=””>
    C. <Link to=”/path”>
    D. goTo()
    ✅ Answer: C
45. What is the purpose of <Routes> in React Router v6+?
    A. Handle browser APIs
    B. Render multiple routes
    C. Replace <Switch>
    D. Create nested components
    ✅ Answer: C

---

Section 6: Redux & State Management – 10 MCQs

46. What is Redux primarily used for?
    A. Styling
    B. Routing
    C. State management
    D. Server calls
    ✅ Answer: C
47. Redux uses…
    A. Observable pattern
    B. Event Loop
    C. Flux architecture
    D. Context API
    ✅ Answer: C
48. Which function sends an action to the Redux store?
    A. push()
    B. trigger()
    C. dispatch()
    D. submit()
    ✅ Answer: C
49. A Redux reducer is a…
    A. Component
    B. Hook
    C. Pure function
    D. Class
    ✅ Answer: C
50. Which hook is used to access Redux state in a React component?
    A. useRedux()
    B. useStore()
    C. useSelector()
    D. useContext()
    ✅ Answer: C
51. What does useDispatch() return?
    A. State object
    B. Action type
    C. Dispatch function
    D. Store
    ✅ Answer: C
52. What is the shape of a Redux action?
    A. type and payload
    B. action and data
    C. event and handler
    D. state and props
    ✅ Answer: A
53. Redux Toolkit simplifies…
    A. Component rendering
    B. Hook creation
    C. Store setup and reducer logic
    D. CSS styling
    ✅ Answer: C
54. Which of the following is NOT part of Redux flow?
    A. Action
    B. Reducer
    C. Selector
    D. Component
    ✅ Answer: D
55. React Context API is a…
    A. Replacement for useState
    B. Way to manage routing
    C. Lightweight alternative to Redux
    D. Styling tool
    ✅ Answer: C

---

Section 7: Advanced Concepts – 5 MCQs

56. Which hook is used to memoize expensive functions?
    A. useMemo()
    B. useCallback()
    C. useRef()
    D. useEffect()
    ✅ Answer: A
57. What’s the difference between useMemo() and useCallback()?
    A. useMemo returns memoized value, useCallback returns memoized function
    B. useMemo works only in class components
    C. useCallback is faster
    D. No difference
    ✅ Answer: A
58. How can you avoid unnecessary re-renders?
    A. Using React.memo
    B. Using PureComponent
    C. Using shouldComponentUpdate
    D. All of the above
    ✅ Answer: D
59. What is Suspense in React?
    A. Error handling tool
    B. Lazy loading wrapper
    C. DOM parser
    D. Timer
    ✅ Answer: B
60. React 18 introduced which key feature?
    A. Server components
    B. Concurrent rendering
    C. Fiber architecture
    D. JSX support
    ✅ Answer: B

Mastering these React MCQs is a valuable step toward building a strong foundation in component-driven architecture, state management, hooks, and modern front-end development workflows.
If you’re ready to elevate your career with hands-on projects and expert-led instruction, join our React.js course in Gurgaon at Gyansetu and become industry-ready for high-demand front-end and full-stack development roles.