DEV Community

Cover image for My collection of React Interview questions (Part 1)
Miguel Ruiz
Miguel Ruiz

Posted on • Updated on

My collection of React Interview questions (Part 1)

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
Enter fullscreen mode Exit fullscreen mode
  • export vs exports
// ES5
module.exports = Component;

// ES6
export default Component;
Enter fullscreen mode Exit fullscreen mode
  • 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>;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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>;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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>;
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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.)

Top comments (7)

Collapse
 
themindfuldev profile image
Tiago Romero • Edited

Excellent list, great job @migueloop !

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.)

Source (with examples): Update on Async Rendering.

Collapse
 
migueloop profile image
Miguel Ruiz

That's true Tiago. When I first did my list we had an older version of React. I will update it asap. Thanks so much

Collapse
 
themindfuldev profile image
Tiago Romero

You are welcome, Miguel!

And totally, these things change so fast these days!

Thread Thread
 
migueloop profile image
Miguel Ruiz

Updated Tiago! Thanks a lot

Collapse
 
ruslanchek profile image
Ruslan • Edited

I would add that questions:

  1. What is HOC?
  2. What is FC?
  3. The lifecycle of FC's and the difference against class components?
  4. What are hooks and how to?
  5. Shared state management how to implement?
  6. Render time. What happened under the hood?
  7. Fibers - how it works?
  8. Async rendering.
  9. Reusable components.
  10. Best practices.
  11. Flux.
  12. Performance.
  13. Styling methods (styled, Emotion, CSS modules etc)
Collapse
 
migueloop profile image
Miguel Ruiz

Thanks a lot for your message Ruslan. I will definitely extend the guide considering your points

Collapse
 
aershov24 profile image
Alex 👨🏼‍💻FullStack.Cafe

Thanks for the great post Miguel! Your QAs have been added to the fullstack.cafe portal and back-linked to that article!