React is a popular JavaScript library used to build fast and interactive UI. It is an important part of the MERN stack (MongoDB, Express.js, and Node.js). Many technical interviews for full-stack roles, or even front-end, focus on React fundamentals, hooks, JSX, state management, component logic, etc as these skills show your ability to build dynamic and interactive UI.
This set of 100 React MCQ questions with answers is designed to test your knowledge and improve your interview skills before facing real React interview rounds.
100 React MCQ to Test Your MERN Skill
Use these 100 React MCQs to test your MERN stack skills. Read each React quiz first and try to answer it yourself, then only click the dropdown button next to it to reveal the correct answer and explanation.
Q1. Which of the following is the correct definition of React?
A. A server-side framework
B. A library for building user interfaces
C. A back-end database
D. A CSS styling framework
Show Answer
Answer: B
React is an open-source JavaScript library specifically designed for creating UI components.
Q2. Who is the original creator of the React library?
A. Google
B. Twitter
C. Meta (formerly Facebook)
D. Microsoft
Show Answer
Answer: C
React was developed by Jordan Walke, a software engineer at Facebook.
Q3. What is the main purpose of the Virtual DOM in React?
A. To create a direct copy of the database
B. To improve performance by minimizing direct DOM manipulation
C. To replace the browser’s engine
D. To handle server-side routing
Show Answer
Answer: B
The Virtual DOM allows React to update only the parts of the UI that have changed, increasing efficiency.
Q4. How many elements can a React component return at its top level?
A. Exactly two
B. Only one
C. As many as needed
D. None
Show Answer
Answer: B
A component must return a single root element or a Fragment wrapping multiple elements.
Q5. Which syntax is commonly used in React to write HTML-like code within JavaScript?
A. XML
B. BXML
C. JSX
D. JavaScript HTML
Show Answer
Answer: C
JSX stands for JavaScript XML and allows developers to write HTML tags inside JavaScript.
Q6. In React, what are ‘props’ used for?
A. Storing internal component data
B. Passing data from a parent component to a child
C. Modifying the global window object
D. Handling CSS animations
Show Answer
Answer: B
Props (properties) are read-only inputs used to pass information down the component tree.
Q7. What is the primary difference between state and props?
A. State is external, props are internal
B. Props are mutable, state is immutable
C. State is managed within the component, props are passed to it
D. There is no difference
Show Answer
Answer: C
State is private data owned by the component, while props are external parameters.
Q8. Which Hook is used to manage functional component state?
A. useEffect
B. useContext
C. useState
D. useReducer
Show Answer
Answer: C
The useState hook allows functional components to maintain and update their local state.
Q9. When does the useEffect hook run by default (with no dependency array)?
A. Only once on mount
B. After every render
C. Only when the component unmounts
D. Only when a button is clicked
Show Answer
Answer: B
Without a dependency array, useEffect executes after the initial mount and every subsequent update.
Q10. What is the correct way to update a state variable named ‘count’ using useState?
A. count = count + 1
B. this.state.count = 1
C. setCount(count + 1)
D. updateCount(count + 1)
Show Answer
Answer: C
You must use the setter function provided by the useState hook to trigger a re-render.
Q11. Which attribute is used in React to provide a unique identity to list items?
A. id
B. class
C. key
D. index
Show Answer
Answer: C
Keys help React identify which items in a list have changed, been added, or removed.
Q12. What is a “pure component” in React?
A. A component that has no props
B. A component that only renders HTML
C. A component that renders the same output for the same props and state
D. A component that uses no hooks
Show Answer
Answer: C
Pure components perform a shallow comparison of props and state to prevent unnecessary re-renders.
Q13. How do you handle events like clicks in React?
A. onclick=”handleClick()”
B. onClick={handleClick}
C. click={handleClick}
D. on-click={handleClick}
Show Answer
Answer: B
React uses camelCase for event handlers and passes a function as the value.
Q14. What is the purpose of React Fragments?
A. To style components
B. To group multiple elements without adding an extra node to the DOM
C. To create animations
D. To handle API calls
Show Answer
Answer: B
Fragments allow you to return multiple elements without injecting unnecessary div tags into the HTML.
Q15. Which of the following is NOT a rule of React Hooks?
A. Hooks can only be called at the top level
B. Hooks can be called inside loops or conditions
C. Hooks can only be called from React functional components
D. Hooks can be called from custom Hooks
Show Answer
Answer: B
Hooks must always be called at the top level to ensure they execute in the same order every time.
Q16. What does the “useContext” hook do?
A. It manages local component state
B. It allows consumption of values from a React Context without a consumer component
C. It fetches data from an API
D. It creates a new DOM node
Show Answer
Answer: B
useContext provides a way to share data across the component tree without prop drilling.
Q17. In a class component, which method is used for initialization and state setup?
A. render()
B. componentDidMount()
C. constructor()
D. componentWillUpdate()
Show Answer
Answer: C
The constructor is the standard place to initialize state and bind methods in class components.
Q18. What is “lifting state up” in React?
A. Moving state to a child component
B. Deleting state to improve speed
C. Moving state to the closest common ancestor of components that need it
D. Using Redux for everything
Show Answer
Answer: C
Lifting state up ensures multiple components share the same source of truth by moving state to their parent.
Q19. Which lifecycle method is called immediately after a component is inserted into the DOM?
A. componentWillMount()
B. componentDidUpdate()
C. componentDidMount()
D. render()
Show Answer
Answer: C
componentDidMount is ideal for network requests or DOM interactions after the initial render.
Q20. What is the purpose of the “useRef” hook?
A. To update the UI when a value changes
B. To create a persistent reference that doesn’t trigger a re-render when changed
C. To handle global application state
D. To fetch data from a URL
Show Answer
Answer: B
useRef returns a mutable ref object whose .current property persists for the full lifetime of the component.
Q21. How do you pass a value to a child component in React?
A. Using setState
B. Using Props
C. Using the window object
D. Using internal CSS
Show Answer
Answer: B
Props are the standard way to pass data from a parent to its child component.
Q22. Which command is used to create a new React app with the default toolchain?
A. npm build-react-app my-app
B. npx create-react-app my-app
C. npm start react-app
D. react-new my-app
Show Answer
Answer: B
npx create-react-app is the official CLI command for initializing a new project.
Q23. What is the use of “useMemo” hook?
A. To memorize the entire component
B. To memoize the result of an expensive calculation
C. To handle side effects
D. To navigate between pages
Show Answer
Answer: B
useMemo stores the result of a function call so it doesn’t run again unless dependencies change.
Q24. Which of these is a way to conditionally render a component in React?
A. Using if-else statements inside JSX directly
B. Using the ternary operator (?)
C. Using for-loops
D. Using the switch keyword inside a div
Show Answer
Answer: B
The ternary operator is the most common way to handle inline conditional rendering in JSX.
Q25. What is the correct way to write a comment inside JSX?
A. // This is a comment
B. /* This is a comment */
C. { /* This is a comment */ }
D. <!– This is a comment –>
Show Answer
Answer: C
Comments in JSX must be wrapped in curly braces and use JavaScript multi-line comment syntax.
Q26. What does “Babel” do in a React environment?
A. It styles the application
B. It compiles JSX and modern JavaScript into browser-readable ES5
C. It acts as a web server
D. It manages the database
Show Answer
Answer: B
Babel is a transpiler that converts modern syntax (like JSX) into backward-compatible JavaScript.
Q27. How can you prevent a component from rendering in React?
A. return false
B. return null
C. return undefined
D. return 0
Show Answer
Answer: B
Returning null from a component’s render method will prevent it from displaying anything.
Q28. What is the “children” prop?
A. A prop that lists all child components in an array
B. A special prop used to pass elements into a component’s opening and closing tags
C. An internal state variable
D. A method to delete children
Show Answer
Answer: B
props.children allows components to be used as containers for other JSX elements.
Q29. What is the use of the “useCallback” hook?
A. To cache a function instance to prevent unnecessary child re-renders
B. To call an API
C. To update the state of a parent
D. To change the theme
Show Answer
Answer: A
useCallback returns a memoized version of a callback function that only changes if dependencies change.
Q30. Which package is typically used for routing in React applications?
A. react-router-dom
B. react-navigation
C. react-route-manager
D. browser-router
Show Answer
Answer: A
react-router-dom is the standard library for handling routing and navigation in web-based React apps.
Q31. In React, what is a “Controlled Component”?
A. A component that controls the whole app
B. A form element whose value is controlled by React state
C. A component that uses the ‘final’ keyword
D. A component that cannot be deleted
Show Answer
Answer: B
Controlled components have their input values driven by the component state rather than the DOM.
Q32. How do you access a DOM element directly in a functional component?
A. document.getElementById()
B. Using the useDom hook
C. Using the useRef hook
D. Using the this keyword
Show Answer
Answer: C
The useRef hook provides a way to interact with DOM nodes directly when necessary.
Q33. What is the significance of the “alt” attribute in a React image tag?
A. It changes the image color
B. It provides alternative text for accessibility and SEO
C. It defines the image width
D. It is not required in React
Show Answer
Answer: B
The alt attribute is essential for screen readers and search engines to understand image content.
Q34. What does the “useReducer” hook do?
A. It reduces the size of the component
B. It manages complex state logic through an action and reducer pattern
C. It deletes the state
D. It speeds up the rendering process
Show Answer
Answer: B
useReducer is often preferred over useState for managing state that involves complex transitions or multiple sub-values.
Q35. Which of the following is used to pass data through the component tree without manually passing props?
A. Redux
B. React Context
C. Local Storage
D. Props Tunneling
Show Answer
Answer: B
Context API is designed to share data that can be considered “global” for a tree of React components.
Q36. What is the default port for a local React development server?
A. 8080
B. 5000
C. 3000
D. 3306
Show Answer
Answer: C
By default, create-react-app launches the dev server on port 3000.
Q37. How do you define a class-based component in React?
A. class MyComp extends React.Component { … }
B. function MyComp() { … }
C. const MyComp = () => { … }
D. new ReactComponent(MyComp)
Show Answer
Answer: A
Class components must extend React.Component and include a render() method.
Q38. What is the “strict mode” in React?
A. A mode that prevents all errors
B. A tool for highlighting potential problems in an application during development
C. A security feature for production
D. A way to write CSS strictly
Show Answer
Answer: B
StrictMode is a wrapper that checks for deprecated methods and side effects in development.
Q39. What is “prop drilling”?
A. A technique to optimize performance
B. The process of passing props through many layers of components to reach a deep child
C. Injecting props into a database
D. A way to create forms
Show Answer
Answer: B
Prop drilling occurs when data is passed through intermediate components that don’t need it, just to reach a distant child.
Q40. Which lifecycle method is used for cleanup (like removing event listeners)?
A. componentWillUpdate()
B. componentDidUnmount()
C. componentWillUnmount()
D. stopComponent()
Show Answer
Answer: C
componentWillUnmount is the lifecycle method where you perform final cleanup before a component is destroyed.
Q41. How can you apply a CSS class to a React element?
A. class=”my-style”
B. className=”my-style”
C. style=”my-style”
D. cssClass=”my-style”
Show Answer
Answer: B
Because ‘class’ is a reserved keyword in JavaScript, React uses ‘className’ for DOM elements.
Q42. What is the result of using “setState” in React?
A. It reloads the entire page
B. It schedules an update to the component’s state and triggers a re-render
C. It permanently deletes the previous state
D. It modifies the props
Show Answer
Answer: B
setState (or the updater from useState) tells React that data has changed and the UI needs updating.
Q43. Which of the following is used to handle data fetching in React?
A. useState
B. useEffect
C. useData
D. Both A and B
Show Answer
Answer: D
Typically, useState stores the fetched data, while useEffect triggers the fetch operation on mount.
Q44. What does the “key” prop help React with during reconciliation?
A. It speeds up the CSS loading
B. It helps identify which items in a list have changed, been added, or removed
C. It encrypts the component data
D. It links the component to a URL
Show Answer
Answer: B
Keys provide a stable identity to elements so React can efficiently update lists.
Q45. Is React a framework or a library?
A. Framework
B. Library
C. Language
D. Operating System
Show Answer
Answer: B
React is considered a library because it focuses only on the view layer, unlike full frameworks like Angular.
Q46. What is “Lazy Loading” in React?
A. Loading data only when the user scrolls down
B. A technique to defer the loading of components until they are actually needed
C. Making the website run slower for debugging
D. Skipping the build process
Show Answer
Answer: B
React.lazy allows you to render a dynamic import as a regular component, reducing initial bundle size.
Q47. Which React hook is a replacement for the “componentDidUpdate” lifecycle method?
A. useState
B. useLayoutEffect
C. useEffect
D. useRef
Show Answer
Answer: C
useEffect with a dependency array effectively handles logic previously found in componentDidUpdate.
Q48. What is “JSX” an abbreviation for?
A. Java Serialized XML
B. JavaScript XML
C. JSON X-platform
D. Java Syntax Extension
Show Answer
Answer: B
JSX is a syntax extension for JavaScript that looks like HTML.
Q49. In React, what does the “spread operator” (…) do with props?
A. It deletes all props
B. It passes all properties of an object as individual props to an element
C. It combines two components
D. It creates a new CSS file
Show Answer
Answer: B
The spread operator is a concise way to forward all keys of an object as props to a child.
Q50. Which of the following is a Hook for optimizing performance by preventing re-calculations?
A. useEffect
B. useMemo
C. useState
D. useHistory
Show Answer
Answer: B
useMemo memoizes values so they aren’t recalculated unless their dependencies change.
Q51. What is the purpose of the “Suspense” component?
A. To stop the application from running
B. To wait for some code to load and display a fallback UI (like a loader)
C. To handle errors in components
D. To style the background
Show Answer
Answer: B
Suspense lets your components “wait” for something (like a lazy-loaded component) before rendering.
Q52. How do you create a React Fragment using short syntax?
A. <Frag>…</Frag>
B. <>…</>
C. <[ ]>…</[ ]>
D. <div fragment>…</div>
Show Answer
Answer: B
Empty tags <> and </> are the shorthand syntax for React Fragments.
Q53. Which tool is used to manage global state in large React apps?
A. Express
B. Redux
C. Axios
D. Mongoose
Show Answer
Answer: B
Redux is a popular state management library used for handling global application state.
Q54. What is “reconciliation” in React?
A. The process of merging two React apps
B. The process of updating the real DOM to match the virtual DOM
C. The process of compiling JSX
D. Connecting to a database
Show Answer
Answer: B
Reconciliation is the diffing algorithm React uses to update the UI efficiently.
Q55. In React, what is an “Uncontrolled Component”?
A. A component that has no state
B. A component where form data is handled by the DOM itself
C. A component that crashes frequently
D. A component that cannot be styled
Show Answer
Answer: B
Uncontrolled components use refs to pull values from the DOM when needed instead of using state.
Q56. Which method is used to render a React element into a root DOM node?
A. ReactDOM.render()
B. React.mount()
C. window.render()
D. document.mount()
Show Answer
Answer: A
In React 17 and below, ReactDOM.render is the primary way to mount the app; React 18 uses createRoot.
Q57. What is the “useLayoutEffect” hook used for?
A. To perform animations before the screen is painted
B. To fetch data asynchronously
C. To log data to the console
D. To set the browser title
Show Answer
Answer: A
useLayoutEffect runs synchronously after all DOM mutations but before the browser has a chance to paint.
Q58. How do you pass a function to a child component?
A. You cannot pass functions as props
B. Just like any other prop: <Child handler={myFunc} />
C. Using the useFunction hook
D. Using the window object
Show Answer
Answer: B
Functions are first-class citizens in JS and can be passed as props to children.
Q59. What happens if you update state directly without using setState?
A. The app will crash
B. The component will not re-render
C. The data will be updated correctly in the UI
D. React will throw a compile error
Show Answer
Answer: B
React doesn’t track direct mutations; you must use setState to notify React of changes.
Q60. Which of these is a popular CSS-in-JS library used with React?
A. Bootstrap
B. Styled-components
C. Sass
D. jQuery UI
Show Answer
Answer: B
Styled-components allows you to write actual CSS code to style your React components.
Q61. What are “custom hooks”?
A. Built-in hooks provided by React
B. Functions that start with “use” and can call other hooks to share logic
C. Hooks used for CSS only
D. Hooks that cannot be reused
Show Answer
Answer: B
Custom hooks are a way to extract and reuse component logic across different components.
Q62. What does the “useId” hook do (introduced in React 18)?
A. Generates unique IDs for accessibility attributes
B. Generates random passwords
C. Connects the user to a database ID
D. Tracks the user session
Show Answer
Answer: A
useId is used for generating unique IDs that are stable across the server and client.
Q63. What is the role of the “npm start” command?
A. Compiles the app for production
B. Starts the development server
C. Installs dependencies
D. Runs unit tests
Show Answer
Answer: B
npm start runs the app in development mode with hot-reloading enabled.
Q64. In React, what is a “Portal”?
A. A way to navigate to different websites
B. A method to render children into a DOM node that exists outside the parent component’s hierarchy
C. A gatekeeper for security
D. A type of API
Show Answer
Answer: B
Portals are commonly used for modals, tooltips, and floating menus.
Q65. What is the purpose of the “Error Boundary” in React?
A. To prevent the entire app from crashing when a child component fails
B. To fix syntax errors automatically
C. To stop the user from entering wrong data
D. To handle 404 pages
Show Answer
Answer: A
Error boundaries catch JavaScript errors in their child component tree and display a fallback UI.
Q66. Can you use Hooks inside Class Components?
A. Yes, always
B. No, hooks are for functional components only
C. Only useState is allowed
D. Only in the render method
Show Answer
Answer: B
Hooks are fundamentally designed to be used in functional components.
Q67. What is the “displayName” property used for?
A. To name the component in the browser tab
B. To provide a name for the component in React DevTools debugging
C. To set the user’s name
D. To define the CSS class name
Show Answer
Answer: B
displayName helps identify components during debugging and in the DevTools hierarchy.
Q68. Which function is used to create a Context object?
A. React.createContext()
B. React.useContext()
C. new Context()
D. React.setContext()
Show Answer
Answer: A
createContext initializes a context that components can provide or consume.
Q69. What is the benefit of “React.memo”?
A. It saves the state to local storage
B. It prevents a functional component from re-rendering if its props haven’t changed
C. It memoizes the entire website
D. It creates a backup of the component
Show Answer
Answer: B
React.memo is a higher-order component for performance optimization via memoization.
Q70. What does the “key” prop help prevent in list rendering?
A. Duplicate CSS classes
B. Issues with component state being preserved incorrectly when list order changes
C. Memory leaks
D. XSS attacks
Show Answer
Answer: B
Keys ensure that React correctly matches local state with the correct list item.
Q71. What is the correct way to import React into a file?
A. import React from ‘react’;
B. require(‘react’);
C. import { React } from ‘react’;
D. include ‘react’;
Show Answer
Answer: A
ES6 module syntax is the standard for importing React into components.
Q72. Which of the following is true about React state?
A. It cannot be changed
B. Changes to state trigger a re-render of the component
C. It is the same as props
D. It is only used for global data
Show Answer
Answer: B
React monitors state changes to decide when the UI needs to be updated.
Q73. What is “High Order Component” (HOC)?
A. A component with many children
B. A function that takes a component and returns a new component
C. A component that is rendered at the top of the tree
D. A component that uses many hooks
Show Answer
Answer: B
HOCs are a pattern used for reusing component logic by wrapping them.
Q74. How do you pass multiple props efficiently?
A. Using a for-loop
B. Using the spread operator (…)
C. Using the pipe operator
D. Passing them one by one only
Show Answer
Answer: B
The spread operator is the most efficient way to pass all properties of an object as props.
Q75. What is the purpose of the “useDebugValue” hook?
A. To debug the browser console
B. To display a label for custom hooks in React DevTools
C. To find syntax errors
D. To set breakpoints in code
Show Answer
Answer: B
useDebugValue is used for a better debugging experience when creating custom hooks.
Q76. Which hook should be used for subscription logic?
A. useState
B. useEffect
C. useContext
D. useReducer
Show Answer
Answer: B
useEffect is the correct place for setting up and tearing down subscriptions.
Q77. What is “React Fiber”?
A. A new CSS framework for React
B. The internal reconciliation engine reimplementation in React
C. A way to connect React to fiber optics
D. A library for animations
Show Answer
Answer: B
Fiber is the core algorithm used by React to handle asynchronous rendering and prioritization.
Q78. How can you define default values for props?
A. Component.defaultProps = { … }
B. Component.props = { … }
C. Component.initial = { … }
D. Component.state = { … }
Show Answer
Answer: A
The defaultProps property allows you to set fallback values for props if none are provided.
Q79. What is the “useTransition” hook used for?
A. To handle page transitions
B. To mark state updates as non-urgent to keep the UI responsive
C. To animate CSS properties
D. To change the background color
Show Answer
Answer: B
useTransition allows you to prioritize urgent updates (like typing) over heavy background updates.
Q80. In React 18, what is “Concurrent Mode”?
A. Running multiple apps at once
B. A set of features that help React apps stay responsive by working on multiple tasks at once
C. A way to use multiple databases
D. A CSS property for layout
Show Answer
Answer: B
Concurrency allows React to interrupt a long-running render to handle a high-priority user event.
Q81. How do you write inline styles in React?
A. style=”color: red”
B. style={{ color: ‘red’ }}
C. style={color: ‘red’}
D. class=”red-text”
Show Answer
Answer: B
Inline styles in React are written as JavaScript objects using camelCase properties.
Q82. What does “lifting state up” help solve?
A. Data synchronization between sibling components
B. Component styling issues
C. Slow API responses
D. Browser compatibility
Show Answer
Answer: A
By moving state to a shared parent, sibling components can stay in sync.
Q83. Which of the following is NOT a hook?
A. useHistory
B. useLocation
C. useProps
D. useParams
Show Answer
Answer: C
There is no “useProps” hook; props are passed as an argument to the function.
Q84. What is the “SyntheticEvent” in React?
A. An artificial event that doesn’t exist
B. A cross-browser wrapper around the browser’s native event
C. An event used only for testing
D. A way to trigger events manually
Show Answer
Answer: B
React wraps native events in SyntheticEvents to ensure consistent behavior across all browsers.
Q85. What is the role of “Reducers” in Redux or useReducer?
A. To reduce the bundle size
B. To determine how the state changes in response to an action
C. To fetch data from an API
D. To style the application
Show Answer
Answer: B
Reducers are pure functions that take the current state and an action, then return a new state.
Q86. How can you handle errors in React components using a specific lifecycle method?
A. componentDidCatch()
B. errorHandler()
C. catchError()
D. componentError()
Show Answer
Answer: A
componentDidCatch is used within Error Boundary components to log error information.
Q87. What does the “useDeferredValue” hook do?
A. It speeds up the API call
B. It defers updating a part of the UI to prioritize more urgent updates
C. It deletes a value after a delay
D. It caches a value in the database
Show Answer
Answer: B
This hook is used to “defer” a value so that high-priority renders can finish first.
Q88. Which of these is a valid way to create a React component?
A. Functional Component
B. Class Component
C. Both A and B
D. Neither A nor B
Show Answer
Answer: C
React supports both function-based and class-based component declarations.
Q89. What is the purpose of “PropTypes”?
A. To style the props
B. To perform type-checking on the props passed to a component
C. To create new props
D. To hide props from the user
Show Answer
Answer: B
PropTypes ensure that components receive the correct data types for their props during development.
Q90. What is “Hydration” in React?
A. Cleaning the code
B. The process of attaching event listeners to server-rendered HTML
C. Converting CSS to JS
D. Refreshing the browser page
Show Answer
Answer: B
Hydration makes a static server-rendered page interactive by connecting React logic on the client.
Q91. What is the difference between useEffect and useLayoutEffect?
A. useEffect is faster
B. useLayoutEffect runs synchronously after DOM mutations; useEffect runs asynchronously
C. useEffect is for class components
D. There is no difference
Show Answer
Answer: B
useLayoutEffect blocks the paint to ensure the UI is updated visually at the same time as DOM changes.
Q92. What is the “Provider” component in Context API used for?
A. To provide data to all its descendant components
B. To consume data from a parent
C. To create a new component
D. To handle routing
Show Answer
Answer: A
The Provider makes a value available to any child component that wants to consume it.
Q93. How do you start a production build of a React app?
A. npm build
B. npm run build
C. npm start production
D. react-build
Show Answer
Answer: B
The build script optimizes the app and bundles files into a “build” folder for deployment.
Q94. What is a “Ref” used for in React?
A. To store state
B. To access a DOM node or a React element directly
C. To navigate between pages
D. To define a component’s name
Show Answer
Answer: B
Refs provide a way to bypass the standard prop-based flow to interact with elements.
Q95. What does “Stateful” component mean?
A. A component that has its own internal state
B. A component that is full of code
C. A component that is permanent
D. A component that uses props
Show Answer
Answer: A
Stateful components manage and track data that can change over time.
Q96. Which operator can be used to render nothing if a condition is false in JSX?
A. ??
B. ||
C. &&
D. !
Show Answer
Answer: C
The logical AND (&&) operator renders the right-side element only if the left side is true.
Q97. In React, what is “Composition”?
A. Inheriting from other components
B. Combining small, simple components to build complex UIs
C. Writing code in a single file
D. Using a specific design tool
Show Answer
Answer: B
React favors composition over inheritance for reusing code between components.
Q98. What is the “useImperativeHandle” hook used for?
A. To handle API errors
B. To customize the instance value that is exposed to parent components when using refs
C. To make a component run faster
D. To handle mouse clicks
Show Answer
Answer: B
It works with forwardRef to limit which internal methods of a child are accessible to the parent.
Q99. What does “React.forwardRef” do?
A. It forwards the state to the next page
B. It allows a component to pass a ref it receives to its own children
C. It moves the component forward in the DOM
D. It redirects the user
Show Answer
Answer: B
forwardRef is useful for high-order components or UI libraries that need to expose DOM nodes.
Q100. Which command is used to update the React library to the latest version?
A. npm update react
B. npm install react@latest
C. react-upgrade
D. update-react-app
Show Answer
Answer: B
Using npm install with the @latest tag ensures you get the most recent stable release of React.
Conclusion
So, how many React MCQs did you answer correctly? You might not have been able to answer many of them, but simply by reviewing the answers and explanations, you’ll be able to answer them next time. You can practice these questions two or three times a week, and when you feel confident that you can not only answer all of them but also understand the concepts behind them, then you’re ready to go for a real interview. For more in-depth practice, check out 50 React Interview Questions You Must Know in 2026 (Full Q&A) to dive deeper into previously asked interview questions with detailed answers.
Resources and References:
- React Official Documentation – The official React docs provide guides on core concepts, hooks, components, and new updates maintained by the React team.
- Stack Overflow React Tag – Active Q&A community where developers ask and answer real-world React questions.
- Reddit r/reactjs Community – A large community discussing React tips, tricks, guides, and interview questions.
