Top 10 React interview Questions
1. What are the major features of React?
Answer: The major features of React are:
- It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive.
- Supports server-side rendering.
- Follows Unidirectional data flow or data binding.
- Uses reusable/composable UI components to develop the view.
2. What are the advantages of React?
Answer :
- Increases the application’s performance with Virtual DOM.
- JSX makes code easy to read and write.
- It renders both on client and server side (SSR).
- Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.
- Easy to write unit and integration tests with tools such as Jest.
3 . What is the difference between Element and Component ?
Answer : A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents.
A component is a function or a Class which optionally accepts input and returns a React element.
4 . What is Lifting State Up in React?
Answer : Often there will be a need to share state between different components. The common approach to share state between two components is to move the state to common parent of the two components. This approach is called as lifting state up in React.js
5 . Explain Life Cycle of a React Component .
Answer : When developing in React, every Component follows a cycle from when it’s created and mounted on the DOM to when it is unmounted and destroyed. This is what we refer to as the Component lifecycle. The component lifecycle has three distinct lifecycle phases: Mounting, Updating and Unmounting
6 . What is context?
Answer: Context provides a way to pass data through the component tree without having to pass props down manually at every level .
7 . What is the purpose of using super constructor with props argument?
Answer: A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to super() call is to access this.props in your child constructors.
8 . What is reconciliation?
Answer: When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.
9 . Why React uses className over class attribute?
Answer: class is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principal reason why React uses className instead of class.
10 . What are React Mixins?
Answer: Mixins are a way to totally separate components to have a common functionality. Mixins should not be used and can be replaced with higher-order components or decorators.
One of the most commonly used mixins is PureRenderMixin. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state:
const PureRenderMixin = require(‘react-addons-pure-render-mixin’)const Button = React.createClass({
mixins: [PureRenderMixin],
// …
})
