Part 1
Part 2
Part 3

+10 interview questions in react straight from my vault

Starting with the most typical questions to some that will blow your mind.
Let's go. The goal is to give short and concise answers

1. What is React?

React is a front-end JavaScript library developed by Facebook in 2011.

• It follows the component based approach which helps in building reusable UI components.
• It is used for developing complex and interactive web and mobile UI.
• Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

2. What are the features of React?

• It uses the virtual DOM instead of the real DOM.
• It uses server-side rendering.
• It follows uni-directional data flow or data binding

3. How is React different of other JS Frameworks?

The interesting fact to note here is ReactJS is only a frontend library and not a whole framework, which deals with the View component of MVC (Model – View – Controller).

Also, in React, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks/ components are integrated together to build one bigger and dynamic application.

4. What do you understand by Virtual DOM? Explain how its working.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.

This Virtual DOM works in three simple steps:

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
2. Then the difference between the previous DOM representation and the new one is calculated.
3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

5. What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc.

Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

• Events are named using camel case instead of just using the lowercase.
• Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

6. What is JSX?

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

7. Why can’t browsers read JSX?

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

8. How different is React’s ES6 syntax when compared to ES5?

Syntax has changed from ES5 to ES6 in following aspects:

• require vs import

// ES5
var React = require('react');

// ES6
import React from 'react';

export vs exports

• export vs exports

// ES5
module.exports = Component;

// ES6
export default Component;

• component and function

// ES5
var MyComponent = React.createClass({
    render: function() {
        return <h3>Hello Edureka!</h3>;
    }
});

// ES6
class MyComponent extends React.Component {
    render() {
        return <h3>Hello Edureka!</h3>;
    }
}

• props

// ES5
var App = React.createClass({
    propTypes: { name: React.PropTypes.string },
    render: function() {
        return <h3>Hello, {this.props.name}!</h3>;
    }
});

// ES6
class App extends React.Component {
    render() {
        return <h3>Hello, {this.props.name}!</h3>;
    }
}

• state

// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render: function() {
        return <h3>Hello, {this.state.name}!</h3>;
    }
});

// ES6
class App extends React.Component {
    constructor() {
        super();
        this.state = { name: 'world' };
    }
    render() {
        return <h3>Hello, {this.state.name}!</h3>;
    }
}

9. What are the different phases of React component’s lifecycle?

There are three different phases of React component’s lifecycle:

• Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.
• Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.
• Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

10. Explain the lifecycle methods of React components in detail

Some of the most important lifecycle methods are:

• componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
• componentDidMount() – Executed on the client side only after the first render.
• componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called.
• shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.
• componentWillUpdate() – Called just before rendering takes place in the DOM.
• componentDidUpdate() – Called immediately after rendering takes place.
• componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

[Update 1] Thanks to

Tiago Romero Garcia

Software Engineer driven by empathy, kindness and creativity. Also capoeirista, dog daddy, platelets donor, sober and vegan.

Just to mention something that recently changed: in React 16.3.0, some lifecycle methods have been deprecated:

• componentWillMount()
• componentWillReceiveProps()
• componentWillUpdate()

They still can be used for now, but you would need to prefix it with UNSAFE_, like UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, and UNSAFE_componentWillUpdate.

These are expected to be removed on React 17.

We got then some new methods to compensate for that:

• getDerivedStateFromProps(props, state) - Called after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to indicate that the new props do not require any state updates.

• getSnapshotBeforeUpdate(prevProps, prevState) - Called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to componentDidUpdate. (This lifecycle isn’t often needed, but can be useful in cases like manually preserving scroll position during rerenders.)