React Interview Questions

Introduction to React

React is an efficient, flexible, and open-source JavaScript framework library that allows developers to the creation of simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook has created React. It was first deployed on the news feed of Facebook in 2011 and on Instagram in 2012. Developers from the Javascript background can easily develop web applications with the help of React.

React Hooks will allow you to use the state and other features of React in which requires a class to be written by you. In simple words, we can say that, React Hooks are the functions that will connect React state with the lifecycle features from the function components. React Hooks is among the features that are implemented latest in the version React 16.8.

Scope of React

The selection of the right technology for the application or web development is becoming more challenging. React has been considered to be the fastest-growing Javascript framework among all. The tools of Javascript are firming their roots slowly and steadily in the marketplace and the React certification demand is exponentially increasing. React is a clear win for front-end developers as it has a quick learning curve, clean abstraction, and reusable components. Currently, there is no end in sight for React as it keeps evolving.

React Interview Questions

React Interview Questions for Freshers

Existing questions from React Interview questions article (Freshers)

1. What are the advantages of using React?
2. What is JSX?
3. What are the differences between functional and class components?
4. What is the virtual DOM? How does react use the virtual DOM to render the UI?
5. What are the differences between controlled and uncontrolled components?
6. Explain React state and props.
7. Explain React Hooks.
8. What are keys in React?
9. What is prop drilling in React?
10. What are error boundaries?

1. What is React?

React is a front-end and open-source JavaScript library which is useful in developing user interfaces specifically for applications with a single page. It is helpful in building complex and reusable user interface(UI) components of mobile and web applications as it follows the component-based approach.

The important features of React are:

• It supports server-side rendering.
• It will make use of the virtual DOM rather than real DOM (Data Object Model) as RealDOM manipulations are expensive.
• It follows unidirectional data binding or data flow.
• It uses reusable or composable UI components for developing the view.

2. What are the limitations of React?

The few limitations of React are as given below:

• React is not a full-blown framework as it is only a library.
• The components of React are numerous, and will take time for fully grasping the benefits of all.
• It might be difficult for beginner programmers to understand React.
• Coding might become complex as it will make use of inline templating and JSX.

3. What is React Hooks?

React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components. These are newly added features made available in React 16.8 version. Each lifecycle of a component is having 3 phases which include mount, unmount, and update. Along with that, components have properties and states. Hooks will allow using these methods by developers for improving the reuse of code with higher flexibility navigating the component tree.

Using Hook, all features of React can be used without writing class components. For example, before React version 16.8, it required a class component for managing the state of a component. But now using the useState hook, we can keep the state in a functional component.

4. What is useState() in React?

The useState() is a built-in React Hook that allows you for having state variables in functional components. It should be used when the DOM has something that is dynamically manipulating/controlling.

In the below-given example code, The useState(0) will return a tuple where the count is the first parameter that represents the counter's current state and the second parameter setCounter method will allow us to update the state of the counter.

...
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setOtherStuffs(...);
    ...
};

We can make use of setCounter() method for updating the state of count anywhere. In this example, we are using setCounter() inside the setCount function where various other things can also be done. The idea with the usage of hooks is that we will be able to keep our code more functional and avoid class-based components if they are not required.

5. What are the rules that must be followed while using React Hooks?

There are 2 rules which must be followed while you code with Hooks:

1. React Hooks must be called only at the top level. It is not allowed to call them inside the nested functions, loops, or conditions.
2. It is allowed to call the Hooks only from the React Function Components.

6. What is the use of useEffect React Hooks?

The useEffect React Hook is used for performing the side effects in functional components. With the help of useEffect, you will inform React that your component requires something to be done after rendering the component or after a state change. The function you have passed(can be referred to as “effect”) will be remembered by React and call afterward the performance of DOM updates is over. Using this, we can perform various calculations such as data fetching, setting up document title, manipulating DOM directly, etc, that don't target the output value. The useEffect hook will run by default after the first render and also after each update of the component. React will guarantee that the DOM will be updated by the time when the effect has run by it.

The useEffect React Hook will accept 2 arguments:
useEffect(callback[, dependencies]);
Where the first argument callback represents the function having the logic of side-effect and it will be immediately executed after changes were being pushed to DOM. The second argument dependencies represent an optional array of dependencies. The useEffect() will execute the callback only if there is a change in dependencies in between renderings.

Example:

import { useEffect } from 'react';
function WelcomeGreetings({ name }) {
  const msg = `Hi, ${name}!`;     // Calculates output
  useEffect(() => {
    document.title = `Welcome to you ${name}`;    // Side-effect!
  }, [name]);
  return <div>{msg}</div>;         // Calculates output
}

The above code will update the document title which is considered to be a side-effect as it will not calculate the component output directly. That is why updating of document title has been placed in a callback and provided to useEffect().

Consider you don't want to execute document title update each time on rendering of WelcomeGreetings component and you want it to be executed only when the name prop changes then you need to supply name as a dependency to useEffect(callback, [name]).

7. Why do React Hooks will make use of refs?

Earlier, refs were only limited to class components but now it can also be accessible in function components through the useRef Hook in React.

The refs are used for:

• Managing focus, media playback, or text selection.
• Integrating with DOM libraries by third-party.
• Triggering the imperative animations.

8. What are Custom Hooks?

A Custom Hook is a function in Javascript whose name begins with ‘use’ and which calls other hooks. It is a part of React v16.8 hook update and permits you for reusing the stateful logic without any need for component hierarchy restructuring.

In almost all of the cases, custom hooks are considered to be sufficient for replacing render props and HoCs (Higher-Order components) and reducing the amount of nesting required. Custom Hooks will allow you for avoiding multiple layers of abstraction or wrapper hell that might come along with Render Props and HoCs.

The disadvantage of Custom Hooks is it cannot be used inside of the classes.

9. Explain about types of side effects in React component.

There are two types of side effects in React component. They are:

1. Effects without Cleanup: This side effect will be used in useEffect which does not restrict the browser from screen update. It also improves the responsiveness of an application. A few common examples are network requests, Logging, manual DOM mutations, etc.
2. Effects with Cleanup: Some of the Hook effects will require the cleanup after updating of DOM is done. For example, if you want to set up an external data source subscription, it requires cleaning up the memory else there might be a problem of memory leak. It is a known fact that React will carry out the cleanup of memory when the unmounting of components happens. But the effects will run for each render() method rather than for any specific method. Thus we can say that, before execution of the effects succeeding time the React will also cleanup effects from the preceding render.

10. What are props in React?

The props in React are the inputs to a component of React. They can be single-valued or objects having a set of values that will be passed to components of React during creation by using a naming convention that almost looks similar to HTML-tag attributes. We can say that props are the data passed from a parent component into a child component.

The main purpose of props is to provide different component functionalities such as:

• Passing custom data to the React component.
• Using through this.props.reactProp inside render() method of component.
• Triggering state changes.

For example, consider we are creating an element with reactProp property as given below:
<Element reactProp = "1" />
This reactProp name will be considered as a property attached to native props object of React which already exists on each component created with the help of React library.
props.reactProp;

React Interview Questions for Experienced

Existing questions from React Interview questions article (Experienced)

7. Explain Strict Mode in React.
8. How to prevent re-renders in React?
9. What are the different ways to style a React component?
10. Name a few techniques to optimize React app performance.
11. How to pass data between react components?
12. What are Higher Order Components?

1. What are the different phases of the component lifecycle?

There are four different phases in the lifecycle of React component. They are:

1. Initialization: During this phase, React component will prepare by setting up the default props and initial state for the upcoming tough journey.
2. Mounting: Mounting refers to putting the elements into the browser DOM. Since React uses VirtualDOM, the entire browser DOM which has been currently rendered would not be refreshed. This phase includes the lifecycle methods componentWillMount and componentDidMount.
3. Updating: In this phase, a component will be updated when there is a change in the state or props of a component. This phase will have lifecycle methods like componentWillUpdate, shouldComponentUpdate, render, and componentDidUpdate.
4. Unmounting: In this last phase of the component lifecycle, the component will be removed from the DOM or will be unmounted from the browser DOM. This phase will have the lifecycle method named componentWillUnmount.

(Upgraded answer for Question 6. What are the different lifecycle methods in React? from existing article)

2. What are the lifecycle methods of React?

React lifecycle hooks will have the methods that will be automatically called at different phases in the component lifecycle and thus it provides good control over what happens at the invoked point. It provides the power to effectively control and manipulate what goes on throughout the component lifecycle.

For example, if you are developing the YouTube application, then the application will make use of a network for buffering the videos and it consumes the power of the battery (assume only these two). After playing the video if the user switches to any other application, then you should make sure that the resources like network and battery are being used most efficiently. You can stop or pause the video buffering which in turn stops the battery and network usage when the user switches to another application after video play.

So we can say that the developer will be able to produce a quality application with the help of lifecycle methods and it also helps developers to make sure to plan what and how to do it at different points of birth, growth, or death of user interfaces.

The various lifecycle methods are:

• constructor(): This method will be called when the component is initiated before anything has been done. It helps to set up the initial state and initial values.
• getDerivedStateFromProps(): This method will be called just before element(s) rendering in the DOM. It helps to set up the state object depending on the initial props. The getDerivedStateFromProps() method will have a state as an argument and it returns an object that made changes to the state. This will be the first method to be called on an updating of a component.
• render(): This method will output or re-render the HTML to the DOM with new changes. The render() method is an essential method and will be called always while the remaining methods are optional and will be called only if they are defined.
• componentDidMount(): This method will be called after the rendering of the component. Using this method, you can run statements that need the component to be already kept in the DOM.
• shouldComponentUpdate(): The Boolean value will be returned by this method which will specify whether React should proceed further with the rendering or not. The default value for this method will be True.
• getSnapshotBeforeUpdate(): This method will provide access for the props as well as for the state before the update. It is possible to check the previously present value before the update, even after the update.
• componentDidUpdate(): This method will be called after the component has been updated in the DOM.
• componentWillUnmount(): This method will be called when the component removal from the DOM is about to happen.

3. Does React Hook work with static typing?

Static typing refers to the process of code check during the time of compilation for ensuring all variables will be statically typed. React Hooks are functions that are designed to make sure about all attributes must be statically typed. For enforcing stricter static typing within our code, we can make use of the React API with custom Hooks.

4. Explain about types of Hooks in React.

There are two types of Hooks in React. They are:

1. Built-in Hooks: The built-in Hooks are divided into 2 parts as given below:

• Basic Hooks:
  • useState() : This functional component is used to set and retrieve the state.
  • useEffect() : It enables for performing the side effects in the functional components.
  • useContext() : It is used for creating common data that is to be accessed by the components hierarchy without having to pass the props down to each level.
• Additional Hooks:
  • useReducer() : It is used when there is a complex state logic that is having several sub-values or when the upcoming state is dependent on the previous state. It will also enable you to optimization of component performance that will trigger deeper updates as it is permitted to pass the dispatch down instead of callbacks.
  • useMemo() : This will be used for recomputing the memoized value when there is a change in one of the dependencies. This optimization will help for avoiding expensive calculations on each render.
  • useCallback() : This is useful while passing callbacks into the optimized child components and depends on the equality of reference for the prevention of unneeded renders.
  • useImperativeHandle() : It will enable modifying the instance that will be passed with the ref object.
  • useDebugValue() : It is used for displaying a label for custom hooks in React DevTools.
  • useRef() : It will permit creating a reference to the DOM element directly within the functional component.
  • useLayoutEffect() : It is used for reading layout from the DOM and re-rendering synchronously.

2. Custom Hooks: A custom Hook is basically a function of JavaScript. The Custom Hook working is similar to a regular function. The "use" at the beginning of the Custom Hook Name is required for React to understand that this is a custom Hook and also it will describe that this specific function follows the rules of Hooks. Moreover, developing custom Hooks will enable you for extracting component logic from within reusable functions.

5. Differentiate React Hooks vs Classes.

React Hooks	Classes
It is used in functional components of React	It is used in class-based components of React
It will not require a declaration of any kind of constructor	It is necessary to declare the constructor inside the class component
It does not require the use of this keyword in state declaration or modification	Keyword this will be used in state declaration (this.state) and in modification (this.setState())
It is easier to use because of the useState functionality	No specific function is available for helping us to access the state and its corresponding setState variable
React Hooks can be helpful in implementing Redux and context API	Because of the long setup of state declarations, class states are generally not preferred

6. How does the performance of using Hooks will differ in comparison with the classes?

• React Hooks will avoid a lot of overheads such as the instance creation, binding of events, etc., that are present with classes.
• Hooks in React will result in smaller component trees since they will be avoiding the nesting that exists in HOCs (Higher Order Components) and will render props which result in less amount of work to be done by React.

7. Do Hooks cover all the functionalities provided by the classes?

Our goal is for Hooks to cover all the functionalities for classes at its earliest. There are no Hook equivalents for the following methods that are not introduced in Hooks yet:

• getSnapshotBeforeUpdate()
• getDerivedStateFromError()
• componentDidCatch()

Since it is an early time for Hooks, few third-party libraries may not be compatible with Hooks at present, but they will be added soon.

8. What is React Router?

React Router refers to the standard library used for routing in React. It permits us for building a single-page web application in React with navigation without even refreshing the page when the user navigates. It also allows to change the browser URL and will keep the user interface in sync with the URL. React Router will make use of the component structure for calling the components, using which appropriate information can be shown. Since React is a component-based framework, it's not necessary to include and use this package. Any other compatible routing library would also work with React.

The major components of React Router are given below:

• BrowserRouter: It is a router implementation that will make use of the HTML5 history API (pushState, popstate, and event replaceState) for keeping your UI to be in sync with the URL. It is the parent component useful in storing all other components.
• Routes: It is a newer component that has been introduced in the React v6 and an upgrade of the component.
• Route: It is considered to be a conditionally shown component and some UI will be rendered by this whenever there is a match between its path and the current URL.
• Link: It is useful in creating links to various routes and implementing navigation all over the application. It works similarly to the anchor tag in HTML.

9. Can React Hook replaces Redux?

The React Hook cannot be considered as a replacement for Redux (It is an open-source, JavaScript library useful in managing the application state) when it comes to the management of the global application state tree in large complex applications, even though the React will provide a useReducer hook that manages state transitions similar to Redux. Redux is very useful at a lower level of component hierarchy to handle the pieces of a state which are dependent on each other, instead of a declaration of multiple useState hooks.

In commercial web applications which is larger, the complexity will be high, so using only React Hook may not be sufficient. Few developers will try to tackle the challenge with the help of React Hooks and others will combine React Hooks with the Redux.

10. Explain conditional rendering in React.

Conditional rendering refers to the dynamic output of user interface markups based on a condition state. It works in the same way as JavaScript conditions. Using conditional rendering, it is possible to toggle specific application functions, API data rendering, hide or show elements, decide permission levels, authentication handling, and so on.

There are different approaches for implementing conditional rendering in React. Some of them are:

• Using if-else conditional logic which is suitable for smaller as well as for medium-sized applications
• Using ternary operators, which takes away some amount of complication from if-else statements
• Using element variables, which will enable us to write cleaner code

React Hooks Coding Questions

1. Explain how to create a simple React Hooks example program.

I will assume that you are having some coding knowledge about JavaScript and have installed Node on your system for creating a below given React Hook program. An installation of Node comes along with the command-line tools: npm and npx, where npm is useful to install the packages into a project and npx is useful in running commands of Node from the command line. The npx looks in the current project folder for checking whether a command has been installed there. When the command is not available on your computer, the npx will look in the npmjs.com repository, then the latest version of the command script will be loaded and will run without locally installing it. This feature is useful in creating a skeleton React application within a few key presses.

Open the Terminal inside the folder of your choice, and run the following command:
npx create-react-app react-items-with-hooks
Here, the create-react-app is a app initializer created by Facebook, to help with easy and quick creation of React application, providing options to customize it while creating the application. The above command will create a new folder named react-items-with-hooks and it will be initialized with a basic React application. Now, you will be able to open the project in your favorite IDE. You can see an src folder inside the project along with the main application component App.js. This file is having a single function App() which will return an element and it will make use of an extended JavaScript syntax(JSX) for defining the component.

JSX will permit you for writing HTML-style template syntax directly into the JavaScript file. This mixture of JavaScript and HTML will be converted by React toolchain into pure JavaScript that will render the HTML element.

It is possible to define your own React components by writing a function that will return a JSX element. You can try this by creating a new file src/SearchItem.js and putting the following code into it.

import React from 'react';

export function SearchItem() {
  return (
    <div>
      <div className="search-input">
        <input type="text" placeholder="SearchItem"/>
      </div>
      <h1 className="h1">Search Results</h1>
      <div className="items">
        <table>
          <thead>
            <tr>
              <th className="itemname-col">Item Name</th>
              <th className="price-col">Price</th>
              <th className="quantity-col">Quantity</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  );
}

This is all about how you can create a component. It will only display the empty table and doesn't do anything. But you will be able to use the Search component in the application. Open the file src/App.js and add the import statement given below to the top of the file.
import { SearchItem } from './SearchItem';
Now, from the logo.svg, import will be removed and then contents of returned value in the function App() will be replaced with the following code:

<div className="App">
  <header>
    Items with Hooks
  </header>
  <SearchItem/>
</div>

You can notice that the element <SearchItem/> has been used just similar to an HTML element. The JSX syntax will enable for including the components in this approach directly within the JavaScript code. Your application can be tested by running the below-given command in your terminal.
npm start
This command will compile your application and open your default browser into http://localhost:4000. This command can be kept on running when code development is in progress to make sure that the application is up-to-date, and also this browser page will be reloaded each time you modify and save the code.

This application will work finely, but it doesn’t look nice as it doesn’t react to any input from the user. You can make it more interactive by adding a state with React Hooks, adding authentication, etc.

2. How to create a switching component for displaying different pages?

A switching component refers to a component that will render one of the multiple components. We should use an object for mapping prop values to components.

A below-given example will show you how to display different pages based on page prop using switching component:

import HomePage from './HomePage'
import AboutPage from './AboutPage'
import FacilitiesPage from './FacilitiesPage'
import ContactPage from './ContactPage'
import HelpPage from './HelpPage'

const PAGES = {
  home: HomePage,
  about: AboutPage,
  facilitiess: FacilitiesPage,
  contact: ContactPage
  help: HelpPage
}

const Page = (props) => {
  const Handler = PAGES[props.page] || HelpPage

  return <Handler {...props} />
}

// The PAGES object keys can be used in the prop types for catching errors during dev-time.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
}

3. How to re-render the view when the browser is resized?

It is possible to listen to the resize event in componentDidMount() and then update the width and height dimensions. It requires the removal of the event listener in the componentWillUnmount() method.

Using the below-given code, we can render the view when the browser is resized.

class WindowSizeDimensions extends React.Component {
  constructor(props){
    super(props);
    this.updateDimension = this.updateDimension.bind(this);
  }
   
  componentWillMount() {
    this.updateDimension()
  }

  componentDidMount() {
    window.addEventListener('resize', this.updateDimension)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimension)
  }

  updateDimension() {
    this.setState({width: window.innerWidth, height: window.innerHeight})
  }

  render() {
    return <span>{this.state.width} x {this.state.height}</span>
  }
}

4. How to pass data between sibling components using React router?

Passing data between sibling components of React is possible using React Router with the help of history.push and match.params.

In the code given below, we have a Parent component AppDemo.js and have two Child Components HomePage and AboutPage. Everything is kept inside a Router by using React-router Route. It is also having a route for /about/{params} where we will pass the data.

import React, { Component } from ‘react’;
class AppDemo extends Component {
render() {
   return (
     <Router>
       <div className="AppDemo">
       <ul>
         <li>
           <NavLink to="/"  activeStyle={{ color:'blue' }}>Home</NavLink>
         </li>
         <li>
           <NavLink to="/about"  activeStyle={{ color:'blue' }}>About
  </NavLink>
         </li>
  </ul>
              <Route path="/about/:aboutId" component={AboutPage} />
              <Route path="/about" component={AboutPage} />
              <Route path="/" component={HomePage} />
       </div>
     </Router>
   );
 }
}
export default AppDemo;

The HomePage is a functional component with a button. On button click, we are using props.history.push(‘/about/’ + data) to programmatically navigate into /about/data.

export default function HomePage(props) {
  const handleClick = (data) => {
   props.history.push('/about/' + data);
  }
return (
   <div>
     <button onClick={() => handleClick('DemoButton')}>To About</button>
   </div>
 )
}

Also, the functional component AboutPage will obtain the data passed by props.match.params.aboutId.

export default function AboutPage(props) {
 if(!props.match.params.aboutId) {
     return <div>No Data Yet</div>
 }
 return (
   <div>
     {`Data obtained from HomePage is ${props.match.params.aboutId}`}
   </div>
 )
}

After button click in the HomePage the page will look like below:

5. How to perform automatic redirect after login?

The react-router package will provide the component <Redirect> in React Router. Rendering of a <Redirect> component will navigate to a newer location. In the history stack, the current location will be overridden by the new location just like the server-side redirects.

import React, { Component } from 'react'
import { Redirect } from 'react-router'

export default class LoginDemoComponent extends Component {
  render() {
    if (this.state.isLoggedIn === true) {
      return <Redirect to="/your/redirect/page" />
    } else {
      return <div>{'Please complete login'}</div>
    }
  }
}

Conclusion

React has got more popularity among the top IT companies like Facebook, PayPal, Instagram, Uber, etc., around the world especially in India. Hooks is becoming a trend in the React community as it removes the state management complexities.

This article includes the most frequently asked ReactJS and React Hooks interview questions and answers that will help you in interview preparations. Also, remember that your success during the interview is not all about your technical skills, it will also be based on your state of mind and the good impression that you will make at first. All the best!!

References

• "Beginning React with Hooks " book by Greg Lim
• "Learn React Hooks" book by Daniel Bugl
• https://www.w3docs.com/course/react-the-complete-guide-incl-hooks-react-router-redux
• https://www.youtube.com/watch?v=cF2lQ_gZeA8&list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A
• https://www.youtube.com/watch?v=LlvBzyy-558
• https://www.youtube.com/watch?v=f687hBjwFcM

MCQ's on React

1. What is React or ReactJS?

• a. Component-based Javascript library
• b. Javascript framework
• c. Javascript file
• d. None of the above
• Answer: a. Component-based Javascript library

2. Which of the following comes under the advantages of React?

• a. Integration with other frameworks (like BackboneJS, Angular, etc.) becomes easier because it is only a view library
• b. Increases the performance of an application using Virtual DOM
• c. Can render both on server and client side
• d. All of the above
• Answer: d. All of the above

3. The number of elements that can be returned by a valid React component is ______.

• a. 5
• b. 1
• c. 3
• d. 2
• Answer: b. 1

4. What is the declarative approach for rendering a dynamic list of components depending on array values?

• a. Using <Each/> component
• b. Using reduce array method
• c. Using Array.map() method
• d. Using for or while loop
• Answer: c. Using Array.map() method

5. What is meant by the state in React?

• a. Internal storage of component
• b. External storage of component
• c. Permanent storage
• d. None of the above
• Answer: a. Internal storage of the component

6. Which command can be used for the creation of React app?

• a. npm install create-react-app
• b. install -g create-react-app
• c. npm install -g create-react-app
• d. None of the above
• Answer: c. npm install -g create-react-app

7. What is used for passing the data to a component from outside?

• a. Render with arguments
• b. setState
• c. PropTypes
• d. props
• Answer: d. props

8. ______ will help to keep the data unidirectional in React.

• a.Dom
• b. Props
• c. JSX
• d. Flux
• Answer: d. Flux

9. Which of the following statements related to the "webpack" command is true?

• a. It runs React local development server
• b. It is used to transpile all the JavaScript into a single file
• c. It is a module bundler
• d. None of the above
• Answer: c. It is a module bundler

10. What are the ReactJS limitations?

• a. React will use inline templating and JSX which might seem awkward to a few developers
• b. ReactJS is only for the view layer of the application, which means we will make use of other technologies as well for getting complete tooling set for the application development
• c. The React library is too large
• d. All of these
• Answer: d. All of these

11. What is the usage of setState?

• a. Replacing the state fully instead of the default merge action
• b. Accessing the earlier state before the setState operation
• c. Invoking the code after the setState operation is performed
• d. None of these
• Answer: c. Invoking the code after the setState operation is performed

12. The Keys given to a list of elements in React should be ______.

• a. Not necessarily unique
• b. Unique among the siblings only
• c. Unique in the DOM (Document Object Model)
• d. None of the above
• Answer: b. Unique among the siblings only

13. What function will permit for rendering the React content in an HTML page?

• a. React.render()
• b. ReactDOM.start()
• c. React.mount()
• d. ReactDOM.render()
• Answer: d. ReactDOM.render()

14. React is mainly used for developing ______.

• a. Connectivity
• b. Database
• c. User interface
• d. Design platform
• Answer: c. User interface

15. ______ is a necessary API for every React.js component.

• a. renderComponent
• b. render
• c. SetinitialComponent
• d. All of the above
• Answer: a. renderComponent