close
Full Form Of

Top 100+ React Js Interview Multiple Choice Questions With Answers in 2023

admin

React.js is a very popular open-source front-end JavaScript library used for building web application user interfaces. 

As the demand for React developers increases, it is important to assess their knowledge and skills. That’s where React JS MCQ Interview Questions come in.

This section provides 100+ React JS Multiple Choice Interview Questions and Answers in 2023 are designed to help hiring managers, recruiters, and interviewers assess a candidate’s proficiency in React JS. 

Also these MCQs are suitable for both beginners and advanced learners to improve and assess their knowledge of ReactJS.

Most Asked 100+ React Js Interview Multiple Choice Questions With Answers

React Js Interview Multiple Choice Questions with Answers

Q1. What is ReactJS?

  1. A programming language
  2. A framework for building user interfaces
  3. A database management system
  4. An operating system
View Answer

Answer: B is the correct option.

ReactJS is a JavaScript library and framework used for building user interfaces. It was developed by Facebook and is now maintained by a community of developers. ReactJS allows developers to build reusable UI components and manage the state of their applications. It is widely used in web development and has become a popular choice for building single-page applications.

Q2. What is the use of the create-react-app command in the React.js application?

  1. It is used to update a React app.
  2. It is used to create a new React app.
  3. It is used to install dependencies.
  4. None of the above.
View Answer

Answer: B is the correct option.

It is used to create a new React app. The create-react-app command is used to set up a new React project with a preconfigured development environment.

Q3. What will be the output of the following JSX code?

const name = "John";
const element = <h1> Hello, {name}! </h1>
  1. “Hello, John!”
  2. “Hello, {name}!”
  3. The code will throw an error.
  4. None of the above.
View Answer

Answer: A is the correct option.

The {name} expression will be evaluated to “John” at runtime and the resulting JSX element will render as “Hello, John!”.

Q4. What does ES6 stand for?

  1. ECMAScript 6
  2. ECMA 6
  3. ECMAJavaScript 6
  4. EJavaScript 6
View Answer

Answer: A is the correct option.

ES6 stands for ECMAScript 6, which is a major update to the JavaScript language.

Q5. What is the correct name of React.js?

  1. React
  2. React.js
  3. ReactJS
  4. All of the above
View Answer

Answer: D is the correct option.

React.js is known by all of these names and they all refer to the same library.

Q6. What command is used to install create-react-app globally?

  1. npm install -g create-react-app
  2. npm install create-react-app
  3. npm install -f create-react-app
  4. install -g create-react-app
View Answer

Answer: A is the correct option.

The command “npm install -g create-react-app” installs the create-react-app package globally, enabling users to create new React applications with ease.

Q7. What keyword initiates a class in JavaScript?

  1. Constructor
  2. Class
  3. Object
  4. DataObject
View Answer

Answer: B is the correct option.

In JavaScript, a class is a type of function that’s initiated with the keyword “class” to create and define new objects with shared properties and methods.

Q8. What serves as input for class-based components in React?

  1. Class
  2. Factory
  3. Render
  4. Props
View Answer

Answer: D is the correct option.

Props act as input for class-based components, allowing data to be passed from parent to child components, facilitating reusability and modularity.

Q9. Which statement about React.js is incorrect?

  1. React.js has only a view layer, requiring additional code.
  2. The library of React.js is quite large.
  3. JSX in React.js simplifies code readability and writing.
  4. The learning curve for React.js can be steep.
View Answer

Answer: C is the incorrect option.

JSX in React.js allows for a more readable and easy-to-write code by combining HTML and JavaScript, making it an advantage rather than a disadvantage.

Q10. Which function is called to render HTML to the web page in React?

  1. ReactDOM.render()
  2. React.render()
  3. document.renderReact()
  4. Component.renderHTML()
View Answer

Answer: A is the correct option.

ReactDOM.render() is the function used in React to render HTML content to the web page. The first argument of this function is the JSX element that needs to be rendered, and the second argument is the HTML element to which the content needs to be appended.

Q11. What is the result of rendering an input element with disabled={false} in React.js?

  1. It will be rendered as disabled.
  2. It will not be rendered at all.
  3. It will be rendered as enabled.
  4. You cannot set it false.
View Answer

Answer: C is the correct option.

In React.js, the disabled attribute expects a boolean value. When set to false, it will render as enabled.

Q12. What is the purpose of the “key” prop in React.js?

  1. “Key” prop is used to look pretty, and there is no benefit whatsoever.
  2. “Key” prop is a way for React to identify a newly added item in a list and compare it during the “diffing” algorithm.
  3. It is one of the attributes in HTML.
  4. It is not commonly used in an array.
View Answer

Answer: B is the correct option.

The “key” prop in React is used to give a unique identity to elements in a list, allowing React to efficiently update and reorder the list items.

Q13. How can you set a default value for an uncontrolled form field in React.js?

  1. By using the value property
  2. By using the defaultValue property
  3. By using the default property
  4. It is assigned automatically.
View Answer

Answer: B is the correct option.

The defaultValue property can be used in React.js to set a default value for an uncontrolled form field, allowing for easier handling of user input.

Q14. What does JSON stand for?

  1. JavaScript Object Notation
  2. Java Standard Object Notation
  3. JavaScript Structured Notation
  4. Java Serialized Object Notation
View Answer

Answer: A is the correct option.

JSON is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate.

Q15. What is the purpose of the ReactJS Context API?

  1. It is used to pass data between components
  2. It is used to manage the component’s state
  3. It is used to handle user input events
  4. It is used to fetch data from an external API
View Answer

Answer: A is the correct option.

The ReactJS Context API is used to pass data between components without having to pass the data through every intermediate component. It provides a way to share data across the component tree without having to pass props down manually at every level.

Q16. What is the purpose of ReactJS’s virtual DOM?

  1. To directly manipulate the HTML DOM
  2. To improve the performance of the application
  3. To allow for server-side rendering
  4. To enable seamless integration with other JavaScript libraries
View Answer

Answer: B is the correct option.

The virtual DOM in ReactJS is a lightweight representation of the actual DOM. ReactJS uses the virtual DOM to improve the performance of the application by minimizing the number of updates needed to the actual DOM.

Q17. What are the ways to handle data in react.js?

  1. state and services
  2. state and component
  3. State and props
  4. services and component
View Answer

Answer: C is the correct option.

The ways to handle data in ReactJS are through state and props. State is used for managing component-specific data while props are used for passing data between components.

Q18. What is true for the keys given to a list of elements in React?

  1. Unique in the DOM.
  2. Unique among the siblings only.
  3. Do not require to be unique.
  4. None of the above.
View Answer

Answer: B is the correct option.

React requires keys to be unique among its siblings to efficiently render and update components.

Q19. React.js is a free and open-source front-end:

  1. JavaScript library
  2. Bootstrap library
  3. CSS library
  4. None of the Above
View Answer

Answer: A is the correct option.

React.js is a free and open-source JavaScript library for building user interfaces in the front-end of web applications.

Q20. Which of the following statements is true for controlled components in React.js?

  1. The source of truth is DOM.
  2. The source of truth can be anything.
  3. The source of truth is a component state.
  4. None of the above.
View Answer

Answer: C is the correct option.

Controlled components in React.js have the source of truth for user input in their component state, allowing for easier management of form data.

Q21. What is the purpose of setState() in React.js?

  1. Invoke code after the setState operation is done.
  2. Replace the state completely instead of the default merge action.
  3. Access the previous state before the setState operation.
  4. None of the above.
View Answer

Answer: C is the correct option.

setState() is used in React to update the state of a component, allowing for re-rendering of the component with the updated state. It also provides access to the previous state through a callback function.

Q22. What is the function used to change the state of the React.js component?

  1. this.setState
  2. this.setChangeState
  3. this.State{}
  4. None of the above.
View Answer

Answer: A is the correct option.

this.setState is used to update the state of the React component and re-render the component with the updated state.

Q23. What is the purpose of the “webpack” command in React.js?

  1. To transpile JavaScript into one file
  2. To run the local development server
  3. To bundle modules
  4. None of the above
View Answer

Answer: A is the correct option.

The “webpack” command is used to transpile all the JavaScript down into one file.

Q24. What does React.js utilize to enhance performance?

  1. Original DOM
  2. Virtual DOM
  3. Both A and B
  4. None of the above
View Answer

Answer: B is the correct option.

React.js uses Virtual DOM, a lightweight in-memory representation of the actual DOM, to increase performance by minimizing direct manipulation of the real DOM and optimizing updates.

Q25. How many elements can a valid React component return?

  1. 1
  2. 2
  3. 4
  4. 5
View Answer

Answer: A is the correct option.

A valid React component can return only one element, which can be a single HTML element, a React fragment, or a component containing multiple elements.

Q26. How many ways can you define variables in ES6?

  1. 1
  2. 3
  3. 4
  4. 5
View Answer

Answer: B is the correct option.

In ES6, there are three ways to define variables: using “var”, “let”, and “const”, each with different scoping rules and behavior in various contexts.

Q27. Babel is a:

  1. Compiler
  2. Transpiler
  3. Both A and B are correct
  4. None of the above
View Answer

Answer: C is the correct option.

Babel is a JavaScript tool that can be used to compile/transpile modern JavaScript code into a backwards-compatible version that can run in older browsers or environments. It can also be used to transpile code written in other languages that compile to JavaScript, like TypeScript.

Q28. When was React.js initially released?

  1. May 29, 2013
  2. April 29, 2013
  3. June 29, 2013
  4. May 29, 2014
View Answer

Answer: B is the correct option.

React.js was first released on April 29, 2013, by Facebook.

Q29. What is used to pass data to a React component from outside?

  1. setState
  2. Render with arguments
  3. Props
  4. PropTypes
View Answer

Answer: C is the correct option.

Props (short for properties) are used in React to pass data from a parent component to a child component. They are read-only and cannot be modified by the child component.

Q30. What are props in React and how are they used?

  1. Methods
  2. Injected
  3. Both 1 & 2
  4. All of the above
View Answer

Answer: B is the correct option.

Props (short for properties) are values passed into a React component from its parent component. They are used to customize the behavior of a component, and are read-only.

Q31. What is React mainly used for?

  1. Database
  2. User interface
  3. Connectivity
  4. Design platform
View Answer

Answer: B is the correct option.

React is mainly used for building user interfaces in the front-end of web applications, including single-page applications and mobile applications.

Q32. What is the smallest building block of ReactJS?

  1. Props
  2. Elements
  3. Components
  4. None of the above
View Answer

Answer: B is the correct option.

An element is the smallest building block of ReactJS, which represents a single unit of a user interface, like a button or a text input.

Q33. What are the two primary ways to manage data in React?

  1. State & Props
  2. Services & Components
  3. State & Services
  4. State & Component
View Answer

Answer: A is the correct option.

State and Props are the two primary methods for handling data in React. State represents the internal storage of a component, while Props allow data to be passed from parent to child components, promoting modularity and reusability.

Q34. What does “state” represent in React?

  1. A permanent storage
  2. Internal storage of the component
  3. External storage of the component
  4. None of the above
View Answer

Answer: B is the correct option.

In React, state refers to the internal storage of a component that holds data specific to that component and can be changed over time, affecting the component’s behavior and rendering.

Q35. What is the declarative method for rendering a list of components based on an array’s values?

  1. Using the reduce array method
  2. Using the <Each /> component
  3. Using the Array.map() method
  4. With a for/while loop
View Answer

Answer: C is the correct option.

The Array.map() method is a declarative way to render a dynamic list of components in React based on values in an array, allowing efficient iteration and transformation of the array elements.

Q36. What is the default port for the webpack-dev-server?

  1. 3000
  2. 8080
  3. 3030
  4. 6060
View Answer

Answer: B is the correct option.

The webpack-dev-server runs by default on port 8080, providing a development server with live reloading for a faster and smoother development experience.

Q37. Which keyword is used for class inheritance in JavaScript?

  1. Create
  2. Inherits
  3. Extends
  4. This
View Answer

Answer: C is the correct option.

The “extends” keyword is used in JavaScript to create class inheritance, allowing a new class to inherit properties and methods from an existing class.

Q38. What are the advantages of React.js?

  1. Increased performance with Virtual DOM
  2. Easy integration with other frameworks
  3. Ability to render on both client and server
  4. All of the above
View Answer

Answer: D is the correct option.

React.js offers these and many other advantages for building user interfaces.

Q39. What is the difference between stateful and stateless components in ReactJS?

  1. Stateful components have state while stateless components do not have state.
  2. Stateful components use class components while stateless components use functional components.
  3. Stateful components have lifecycle methods while stateless components do not have lifecycle methods.
  4. Stateful components are used for rendering dynamic data while stateless components are used for rendering static data.
View Answer

Answer: A is the correct option.

Stateful components in ReactJS are components that have state, meaning they store and manage data that can change over time. They are typically created using class components and can use lifecycle methods to manage their state.

Q40. Which of the following statement is true for uncontrolled components in React.js?

  1. The source of truth is a component state.
  2. The source of truth can be anything.
  3. The source of truth is DOM.
  4. None of the above.
View Answer

Answer: C is the correct option.

Uncontrolled components rely on the DOM as the source of truth for user input, rather than managing state within the component.

Q41. What happens when the state of a React component is changed?

  1. It will do nothing; you have to call render method to render the component again.
  2. It will re-render the component.
  3. It can be created again from scratch.
  4. None of the above.
View Answer

Answer: B is the correct option.

When the state of a React component is changed, the component will re-render to reflect the updated state.

Q42. Calls to setState() method in React.js are:

  1. Synchronous in nature.
  2. Asynchronous in nature.
  3. Are asynchronous but can be made synchronous when required.
  4. None of the above.
View Answer

Answer: B is the correct option.

Calls to setState() method in React.js are asynchronous in nature, but can be made synchronous when required using callback functions.

Q43. What is React Router?

  1. A library for handling server-side routing in React
  2. A library for handling client-side routing in React
  3. A library for styling in React
  4. None of the above
View Answer

Answer: B is the correct option.

React Router is a library for handling client-side routing in React applications.

Q44. Which component is used to render a Route in React Router?

  1. BrowserRouter
  2. Route
  3. Link
  4. Switch
View Answer

Answer:B is the correct option.

The Route component is used to render a particular route in React Router.

Q45. How do you pass parameters in React Router?

  1. As query strings
  2. As URL parameters
  3. As state variables
  4. None of the above
View Answer

Answer: B is the correct option.

You can pass parameters in React Router as URL parameters, which can be accessed in the component using props.match.params.

Q46. How can you implement a default or NotFound page using React Router?

  1. Use the component.
  2. Use the component.
  3. Use the component.
  4. Use the component.
View Answer

Answer: C is the correct option.

The component matches any route that is not matched by any other route. This can be used to implement a default or NotFound page in your React Router application.

Q47. Which of the following is an advantage of using React Router?

  1. Improved performance
  2. Improved user experience
  3. Improved SEO
  4. All of the above
View Answer

Answer: D is the correct option.

Using React Router can improve performance, user experience, and SEO in React applications.

Q48. How do you redirect to a new route in React Router?

  1. By using the Redirect component
  2. By using the Route component with the “redirect” attribute
  3. By using the Switch component with the “redirect” attribute
  4. None of the above
View Answer

Answer: A is the correct option.

The Redirect component can be used to redirect to a new route in React Router.

Q49. Which of the following is NOT a type of routing provided by React Router?

  1. Client-side routing
  2. Server-side routing
  3. Static routing
  4. Dynamic routing
View Answer

Answer: C is the correct option.

Static routing is not a type of routing provided by React Router.

Q50. Which component is used to create a nested route in React Router?

  1. BrowserRouter
  2. Route
  3. Link
  4. Switch
View Answer

Answer: B is the correct option.

The Route component can be used to create a nested route in React Router.

Q51. Which component is used to create a link in React Router?

  1. BrowserRouter
  2. Route
  3. Link
  4. Switch
View Answer

Answer: C is the correct option.

The Link component is used to create a link in React Router, which navigates to a specified route when clicked.

Q52. Which of the following is NOT a type of router provided by React Router?

  1. BrowserRouter
  2. HashRouter
  3. MemoryRouter
  4. HttpRouter
View Answer

Answer: D is the correct option.

HttpRouter is not a type of router provided by React Router.

Q53. Which keyword is used to create a class inheritance in React?

  1. This
  2. Create
  3. Extends
  4. Inherits
View Answer

Answer: C is the correct option.

The “extends” keyword is used to create a class inheritance in React, which allows one class to inherit properties and methods from another class.

Q54. What are arbitrary inputs of components called in React?

  1. Refs
  2. Keys
  3. Props
  4. Elements
View Answer

Answer: C is the correct option.

Props (short for properties) are arbitrary inputs of React components that are passed from parent components to child components, and can be used to customize the behavior and appearance of a component.

Q55. What helps React for keeping their data unidirectional?

  1. JSX
  2. Flux
  3. DOM
  4. Props
View Answer

Answer: B is the correct option.

The Flux architecture pattern, which is often used in conjunction with React, helps to keep data flowing in a unidirectional manner, which simplifies the data flow and makes it easier to reason about the application’s state.

Q56. What is the correct data flow sequence in the Flux architecture pattern?

  1. Dispatcher->Action->Store->View
  2. Action->Dispatcher->View->Store
  3. Action->Dispatcher->Store->View
  4. Action->Store->Dispatcher->View
View Answer

Answer: C is the correct option.

In the Flux architecture pattern, data flows in a unidirectional loop from the “Action” component to the “Dispatcher”, then to the “Store”, and finally to the “View” component.

Q57. What are the requirements for the keys given to a list of elements in React?

  1. Do not require to be unique
  2. Unique in the DOM
  3. Unique among the siblings only
  4. All of the above
View Answer

Answer: C is the correct option.

Keys are used to uniquely identify elements in a list in React, and should be unique among the siblings only. They do not need to be unique across the entire DOM.

Q58. How can you access the state of a component from inside of a member function?

  1. this.getState()
  2. this.values
  3. this.prototype.stateValue
  4. this.state
View Answer

Answer: D is the correct option.

The state of a component can be accessed from inside a member function using the “this.state” syntax.

Q59. What is a state in React.js?

  1. A permanent storage
  2. An internal storage of the component
  3. An external storage of the component
  4. All of the above
View Answer

Answer: B is the correct option.

A state in React.js is an object that stores data within a component. It is used for managing component data that can change over time and affect the component’s rendering.

Q60. How many elements can a valid React component return?

  1. 2
  2. 3
  3. 1
  4. 4
View Answer

Answer: C is the correct option.

A valid React component can only return a single element or a fragment, which can contain multiple elements.

Q61. How can a React app be created?

  1. install -g create-react-app
  2. npm install create-react-app
  3. npx create-react-app reactapp
  4. None of the above
View Answer

Answer: C is the correct option.

The npx command can be used to create a new React app with the create-react-app package. The command “npx create-react-app [app-name]” creates a new React app with the given name.

Q62. What is the purpose of Babel in JavaScript development?

  1. A JavaScript transpiler
  2. A JavaScript interpreter
  3. A JavaScript compiler
  4. None of the above
View Answer

Answer: A is the correct option.

Babel is a JavaScript tool used to transpile modern JavaScript code into an older, more widely-supported version. This allows developers to write modern JavaScript syntax while still being compatible with older browsers and environments.

Q63. What is used in React.js to increase performance?

  1. Virtual DOM
  2. Original DOM
  3. Both original and virtual DOM
  4. None of the above
View Answer

Answer: A is the correct option.

React.js uses a virtual DOM to improve performance, by allowing it to update only the parts of the real DOM that have changed, rather than updating the entire page. This results in faster rendering and better user experience.

Q64. In which programming language is React.js written?

  1. JavaScript
  2. Python
  3. Java
  4. Php
View Answer

Answer: A is the correct option.

React.js is a JavaScript library, and is therefore written in JavaScript.

Q65. Where are React.js components typically stored?

  1. Inside the js/components/ directory
  2. Inside the vendor/components/ directory
  3. Inside the external/components/ directory
  4. Inside the vendor/ directory
View Answer

Answer: A is the correct option.

React.js components are usually stored in the js/components/ directory, keeping them organized and easily accessible within a project structure.

Q66. Which API must every React.js component include?

  1. SetinitialComponent
  2. renderComponent
  3. render
  4. All of the above
View Answer

Answer:C is the correct option.

Every React.js component must include the “render” API, which is a required method that returns the component’s JSX representation and dictates what will be displayed on the screen.

Q67. In the context of the MVC pattern, what role does React.js play?

  1. Middleware
  2. Controller
  3. Model
  4. View
View Answer

Answer:D is the correct option.

React.js is often used as the “View” component in the Model-View-Controller (MVC) pattern, which separates an application’s data (Model), user interface (View), and control flow (Controller) into separate components.

Q68. Who originally developed React.js?

  1. Jordan Walke
  2. Rasmus Lerdorf
  3. Miško Hevery
  4. None of the above
View Answer

Answer:A is the correct option.

React.js was initially developed by Jordan Walke, a software engineer at Facebook, and was first released in 2013.

Q69. How can we pass data to a component from outside in React.js?

  1. SetState
  2. Render with arguments
  3. Props
  4. PropTypes
View Answer

Answer:C is the correct option.

Props (short for properties) are used to pass data from one component to another in React.js.

Q70. Which of the following lifecycle events do React components have at the highest level?

  1. Destruction Initialization State/Property Updates
  2. Initialization State/Property Updates Destruction
  3. State/Property Updates Initialization Destruction
  4. All of the above
View Answer

Answer:D is the correct option.

React components have several lifecycle events, including initialization, state/property updates, and destruction.

Q71. Which of the following methods is not a part of ReactDOM in React.js?

  1. ReactDOM.destroy()
  2. ReactDOM.hydrate()
  3. ReactDOM.createPortal()
  4. ReactDOM.findDOMNode()
View Answer

Answer:A is the correct option.

ReactDOM.destroy() is not a part of ReactDOM in React.js. The other methods are used for rendering and manipulating components in the DOM.

Q72. In which of the following condition, the React.js Lifecycle method static getDerivedSateFromProps(props, state) is called?

  1. The component is created for the first time.
  2. The state of the component is updated.
  3. Both of the above.
  4. None of the above.
View Answer

Answer:C is the correct option.

getDerivedStateFromProps is called when a component is created for the first time and when its state is updated.

Q73. What is the purpose of the shouldComponentUpdate method in ReactJS?

  1. It is used to update the component’s state.
  2. It is used to determine whether the component should be re-rendered.
  3. It is used to handle user input events.
  4. It is used to fetch data from an external API.
View Answer

Answer: B is the correct option.

The shouldComponentUpdate method in ReactJS is used to determine whether the component should be re-rendered. It is called before the component is re-rendered and should return a boolean value. If the value is true, the component will be re-rendered. If the value is false, the component will not be re-rendered.

Q74. What is the useLayoutEffect() function used for in React?

  1. Completing the update
  2. Optimizing for all devices
  3. Changing the layout of the screen
  4. When we need the browser to paint before effects
View Answer

Answer: D is the correct option.

The useLayoutEffect() function is similar to useEffect(), but it is called synchronously after all DOM mutations have been applied, which makes it useful for scenarios where we need the browser to paint before executing the effect.

Q75. Which of the following is a valid JSON data type?

  1. Date
  2. Function
  3. Undefined
  4. All of the above
View Answer

Answer: C is the correct option.

Undefined is a valid JSON data type. However, Date and Function are not valid JSON data types.

Q76. Which method is used to update a component every second in React?

  1. componentDidUpdate()
  2. shouldComponentUpdate()
  3. componentDidMount()
  4. setInterval()
View Answer

Answer: D is the correct option.

The setInterval() method is used to update a component every second in React by repeatedly calling a function after a certain amount of time.

Q77. Why should component names start with capital letter in React?

  1. To differentiate from regular HTML tags.
  2. To make it easier to distinguish between components and elements.
  3. Both A and B are correct.
  4. None of the above.
View Answer

Answer: C is the correct option.

In React, component names must start with a capital letter to differentiate them from regular HTML tags and to make it easier to distinguish between components and elements.

Q78. Which hook in React can be used to share state between components?

  1. useMemo
  2. useCallback
  3. useEffect
  4. useContext
View Answer

Answer: D is the correct option.

The useContext hook in React can be used to share state between components. It provides a way to pass data down the component tree without having to pass props through every level.

Q79. Which hook in React can be used to memoize a function?

  1. useMemo
  2. useCallback
  3. useEffect
  4. useState
View Answer

Answer: B is the correct option.

The useCallback hook in React can be used to memoize a function. It memoizes the result of a function, and only re-creates the function if the inputs have changed.

Q80. The useEffect hook in React can be used to subscribe to events. Which cleanup function should be returned to unsubscribe?

  1. removeEventListener
  2. clearInterval
  3. clearTimeout
  4. off
View Answer

Answer: A is the correct option.

When subscribing to events using the useEffect hook in React, the cleanup function should be returned to unsubscribe. The removeEventListener is used to unsubscribe.

Q81. What happens if the key attribute is not provided when looping through an array in JSX?

  1. The code will not compile.
  2. React will automatically assign a default key to each element.
  3. Each element will have the same key, causing rendering issues.
  4. The element will not be rendered.
View Answer

Answer: C is the correct option.

When the key attribute is not provided or is the same for each element in an array, it can cause rendering issues and prevent React from optimizing updates. It’s important to provide a unique key for each element to ensure proper rendering and performance.

Q82. What is the purpose of the key attribute when looping through an array in JSX?

  1. To assign a unique identifier to each element.
  2. To change the order of elements in the array.
  3. To group elements together based on a shared property.
  4. To apply styles to individual elements.
View Answer

Answer: A is the correct option.

The key attribute is used to provide a unique identifier for each element when looping through an array in JSX. This helps React to optimize updates and avoid unnecessary re-rendering of elements.

Q83. How do you add a key to each element when looping through an array in JSX?

  1. Use the index of the element as the key.
  2. Use a unique identifier as the key.
  3. Keys are not necessary when looping through an array in JSX.
  4. Use a random number generator to create a key.
View Answer

Answer: B is the correct option.

When looping through an array in JSX, it’s important to provide a unique key for each element. This helps React to optimize updates and avoid unnecessary re-rendering of elements.

Q84. How do you import a named export from a module in React?

  1. import NamedExport from ‘./Module’;
  2. import { NamedExport } from ‘./Module’;
  3. import * as NamedExport from ‘./Module’;
  4. import { name as NamedExport } from ‘./Module’;
View Answer

Answer: B is the correct option.

When importing a named export from a module in React, you use the import keyword followed by braces around the name of the export you want to import, then from and the path to the module file.

Q85. How do you export a component as a named export in a React module?

  1. export MyComponent from ‘./MyComponent’;
  2. export { MyComponent };
  3. module.exports = { MyComponent };
  4. export default MyComponent;
View Answer

Answer: B is the correct option.

To export a component as a named export in a React module, you use the export keyword followed by braces around the name of the component, then assign the component to the name.

Q86. How do you export a component as the default export in a React module?

  1. export default MyComponent;
  2. export MyComponent from ‘./MyComponent’;
  3. export { MyComponent };
  4. module.exports = MyComponent;
View Answer

Answer: A is the correct option.

To export a component as the default export in a React module, you use the export default syntax followed by the name of the component.

Q87. What is the correct syntax for importing a default export from a module in React?

  1. import DefaultComponent from ‘./Component’;
  2. import { DefaultComponent } from ‘./Component’;
  3. import * as DefaultComponent from ‘./Component’;
  4. import { default } from ‘./Component’;
View Answer

Answer: A is the correct option.

When importing a default export from a module in React, you use the import keyword followed by the name you want to use for the imported component, then from and the path to the component file.

Q88. Which hook in React can be used to optimize performance by preventing unnecessary renders?

  1. useMemo
  2. useCallback
  3. useEffect
  4. useContext
View Answer

Answer: A is the correct option.

The useMemo hook in React can be used to optimize performance by preventing unnecessary renders. It memoizes the result of a function, and only re-executes the function if the inputs have changed.

Q89. The useEffect hook in React can be used to replace which class lifecycle method?

  1. componentWillMount
  2. componentWillUpdate
  3. componentDidUpdate
  4. shouldComponentUpdate
View Answer

Answer: C is the correct option.

The useEffect hook in React can be used to replace the componentDidUpdate class lifecycle method. The effect will be executed after the component has updated.

Q90. In the useEffect hook, the second argument is used to specify:

  1. The callback function to execute
  2. The dependencies to watch for changes
  3. The initial state of the component
  4. The time interval for the effect to run
View Answer

Answer: B is the correct option.

The second argument to the useEffect hook in React is an array of dependencies that the effect should watch for changes. If any of the dependencies change, the effect will be re-executed. If the array is empty, the effect will only run once.

Q91. Does React.js create a virtual DOM in memory?

  1. TRUE
  2. FALSE
  3. Can be true or false
  4. Cannot say
View Answer

Answer: A is the correct option.

React.js uses a virtual DOM (Document Object Model) as an abstraction of the real DOM, which is a representation of the HTML structure of a web page. The virtual DOM allows React to efficiently update the real DOM only where necessary, resulting in better performance.

Q92. What is the difference between Imperative and Declarative in ReactJS?

  1. Imperative is used for describing how the UI should be updated while declarative is used for describing what the UI should look like.
  2. Imperative is used for describing what the UI should look like while declarative is used for describing how the UI should be updated.
  3. Imperative is used for passing data between components while declarative is used for managing component state.
  4. Imperative is used for handling user input events while declarative is used for rendering static data.
View Answer

Answer: A is the correct option.

In ReactJS, Imperative is a programming paradigm that involves describing how the UI should be updated based on certain conditions or events. This often involves manually manipulating the DOM and making updates based on imperative instructions. In contrast, Declarative programming involves describing what the UI should look like based on certain conditions or events, without specifying how the updates should be made. This can often be accomplished using higher-level abstractions provided by ReactJS, like components, props, and state.

Q93. How to perform automatic redirect after login in React?

  1. Use the history prop to redirect the user.
  2. Use the setState method to update the page.
  3. Use the location prop to redirect the user.
  4. Use the Router component to redirect the user.
View Answer

Answer: A is the correct option.

To perform an automatic redirect after login in React, we can use the history object provided by the react-router-dom library. After a successful login, we can push a new path to the history object to redirect the user to a new page. For example, we can use history.push(‘/dashboard’) to redirect the user to the dashboard page.

Q94. What method can be used to loop through an array in JSX?

  1. for-loop
  2. map()
  3. forEach()
  4. while-loop
View Answer

Answer: B is the correct option.

The map() method can be used to loop through an array and return a new array of elements with transformed data.

Q95. What is the syntax for looping through an array in JSX?

  1. {for (let i = 0; i < array.length; i++) {}}
  2. {array.forEach((item) => {})}
  3. {array.map((item) => {})}
  4. {while (i < array.length) {}}
View Answer

Answer: C is the correct option.

In JSX, we can use curly braces to execute JavaScript expressions. To loop through an array, we use the map() method and return a new array of elements.

Q96. What is the purpose of using StrictMode in React?

  1. To enforce best practices and detect potential problems.
  2. To disable warnings and errors in the console.
  3. To optimize the rendering performance.
  4. None of the above.
View Answer

Answer: A is the correct option.

StrictMode is a developer tool that highlights potential problems in an application. It enforces best practices and enables additional checks and warnings in the development mode, helping developers to detect and fix issues early in the development process.

Q97. Which of the following is not a limitation of React?

  1. React can be difficult to learn for beginners.
  2. React has a steep learning curve.
  3. React applications can be slower than traditional server-side applications.
  4. React can be hard to integrate with other technologies.
View Answer

Answer: C is the correct option.

React applications are typically faster than traditional server-side applications because they use a virtual DOM and only update the parts of the page that have changed. This reduces the number of DOM manipulations required, which can significantly improve performance.

Q98. Which of the following is a limitation of React?

  1. React can only be used for client-side rendering.
  2. React does not support server-side rendering.
  3. React is not suitable for large-scale applications.
  4. React does not have built-in support for animations.
View Answer

Answer: B is the correct option.

One of the limitations of React is that it does not support server-side rendering out of the box. This means that React applications cannot be rendered on the server and sent to the client as HTML, which can affect the performance of the application.

Q99. How do you validate an object with specific properties in React?

  1. Use the object validator
  2. Use the shape validator
  3. Use the arrayOf validator
  4. Objects are automatically validated in React
View Answer

Answer: B is the correct option.

To validate an object with specific properties in React, you can use the shape validator.

Q100. Which of the following is not a valid PropTypes validator for a boolean prop in React?

  1. bool
  2. number
  3. oneOf
  4. oneOfType
View Answer

Answer: B is the correct option.

The number validator is used for validating numeric props in React, not boolean props. The correct validator for a boolean prop is bool.

Q101. Which method in React.js refers to the parent class?

  1. inherits()
  2. self()
  3. super()
  4. this()
View Answer

Answer: C is the correct option.

The super() method is used to call methods in the parent class in React.js, allowing for inheritance and the extension of functionality.

Table of Contents

More Stories