React Interview Questions Cheat Sheet

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, with React Native) UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

Differences between the Real DOM and Virtual DOM

Real DOM Virtual DOM It updates slower It updates faster Can directly update HTML Cannot update HTML directly Creates a new DOM if element updates Updates the JSX if element updates. DOM manipulation is very expensive. DOM manipulation is very easy. Too much memory wastage No memory wastage.

List some of the features of React along with its major advantages.

Big features of React are listed below:

• It leverages the virtual DOM instead of the real DOM, enhancing performance.
• You can use both client-side rendering and server-side rendering, depending on need.
• It follows uni-directional data flow or data binding, making it easier to debug.

Some of the major advantages of React are:

• It increases the application’s perceived performance by not re-rendering the entire HTML page.
• It can be conveniently used on the client (as well as server-side) to support multiple use cases and be used alongside other frameworks.
• Because of JSX, code’s readability increases.
• React is easy to integrate alongside backend libraries like Rails, Node, Django, and even other frontend frameworks like Meteor, Angular, etc. if necessary.
• Using React, writing UI test cases becomes easier since components are isolated and decoupled.

What are the limitations of React?

Limitations of React are listed below:

• React is just a library, not a full-blown framework. You'll need to use plugins to get the full functionality others provide.
• Its API library is very large and can take time to understand.
• It can be a little difficult for novice programmers to understand, as you need to grok multiple concepts like composition, uni-directional data flow, JSX, etc.
• Coding gets complex as it uses inline templating and JSX.

What is JSX?

JSX is shorthand for JavaScript XML. This is a type of file used by React which employs the expressiveness of JavaScript with HTML-like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.

The below snippet is an example of JSX:

render(){
 return(
    <div>
      <h1> Hello World from World!!</h1>
    </div>
  );
}

What do you know about the Virtual DOM? Explain how it works?

The virtual DOM is a lightweight JavaScript object which originally is just a shallow copy of the real DOM. It forms a node tree that lists the elements, their attributes, and content as JS 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.

1. Then the difference between the previous DOM representation and the new one is calculated

1. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

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

// Syntax has changed from ES5 to ES6 in the following aspects:
// 1. require vs import
// ES5
var React = require('react');

// ES6
import React from 'react';

// 2. export vs exports
// ES5
module.exports = Component;

// ES6
export default Component;

// 3. component and function

// ES5
var MyComponent = React.createClass({

    render() {
        return <h3>Hello World!</h3>;
    }
});

// ES6
class MyComponent extends React.Component {

    render() {
        return <h3>Hello World!</h3>;
    }
}

// 4. 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>;
    }
}

// 5. state
// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render() {
        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>;  
    }
}

How is React different from Angular?

Characteristics React Angular ARCHITECTURE Only the View of MVC Complete MVC RENDERING Client-side/Server-side rendering Client-side rendering DOM


Uses virtual DOM


Uses real DOM

DATA BINDING
One-way data binding
Two-way data binding
DEBUGGING
Compile-time debugging
Runtime debugging
AUTHOR Facebook Google

Everything in React is a _____________.

What is state in React and how is it used?

State objects are the heart of React components. States are the source of data that feeds into the various views, and are encouraged to be kept as simple as possible. Basically, states are the objects and properties which determine components rendering and behavior (the final values that users see on their screen). They are mutable unlike the props and create dynamic and interactive components, and are accessed via this.state() or as variables with the useState hook.

How can you update the state of a component?

// State of a component can be updated using this.setState().
class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
        name: 'Maxx',
        id: '101'
        }
    }
    render()
    {
    setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
    return (<div>
                <h1>Hello {this.state.name}</h1>
                <h2>Your Id is {this.state.id}</h2>
        </div>);
    }
}

ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

In which directory React Components are saved?

How many elements does a react component return?

Differentiate between states and props.

Conditions State Props 1. Receive initial value from the parent component

Yes Yes 2. Parent component can change the value
No Yes 3. Set default values inside the component
Yes Yes 4. Changes inside the component
Yes No 5. Set the initial value for child components
Yes Yes 6. Changes inside child components No Yes

What is a state in React?

How can you embed two or more components into one?

// We can embed components into one in the following way:
class MyComponent extends React.Component{
    render(){
        return( <div>
                <h1>Hello</h1>
                <Header/>
            </div>);
    }
}

class Header extends React.Component{
    render(){
    return
        <h1>Header Component</h1>
    };
}

ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

What is Babel?

What does the "webpack" command do?

What port is the default where the webpack-dev-server will run?

What is the arrow function in React? How is it used?

Arrow functions is a convenient use of brief syntax for writing a function expression. They are also called fat arrow‘ (referring to the=>`) functions. These functions are bound to the context of their components, important to note since in ES6 auto binding is not available by default. Arrow functions are most useful while working with higher-order functions.

// General way
render() {
    return(
        <MyInput onChange={this.handleChange.bind(this) } />
    );
}
// With Arrow Function
render() {
    return(
        <MyInput onChange={ (e) => this.handleOnChange(e) } />
    );
}

What is ReactJS?

What are the two ways that data gets handled in React?

In React what is used to pass data to a component from outside?

Why can’t browsers read JSX?

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

“In React, everything is a component.” Explain.

Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces.

It renders each of these components independent of each other without affecting the rest of the UI.

What is the purpose of render() in React.

Each React component must have a render() method. It returns a single React element-- the representation of the native DOM element. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as: form, group, div, etc. This function must be kept pure i.e., it must return the same result each time it is invoked.

What are Props?

Props is the shorthand for Properties in React. They are read-only components that must be kept pure (i.e. immutable). They are always passed down from the parent to the child components throughout the application.

A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and is generally used to render the dynamically generated data.

What is flux?

Flux is an application design paradigm used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React. The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:

One Pager Cheat Sheet

• React is a component-based JavaScript library developed by Facebook in 2011 used to create complex and interactive web and mobile UIs.
• The Real DOM updates slower but can directly update HTML, whereas the Virtual DOM updates faster but cannot update HTML directly, so it updates the JSX instead with no memory wastage.
• React increases perceived performance, making it easy to integrate with other libraries, JSX increases readability, and UI test cases are easier to write.
• React has a large API library and requires the use of multiple concepts and plugins to achieve full functionality, which may be challenging for novice programmers.
• JSX is JavaScript XML that provides an easy-to-understand syntax for React applications to boost performance.
• The Virtual DOM works by re-rendering the entire UI in its representation, calculating the difference between the previous and new DOM, and updating the real DOM with only the changes.
• React's ES6 syntax has drastically changed from ES5 in terms of require vs import, export vs exports, component and function, props, and state.
• React uses a One-way data binding virtual DOM, while Angular uses a Two-way data binding real DOM, and was created by Google and Facebook respectively.
• React components are the building blocks of a React application, allowing for a more modular structure with built-in control of behavior and state to make the development process smoother and more organized.
• React components use state objects to create dynamic and interactive elements by accessing them via this.state() or the useState hook.
• The state of a component can be updated using this.setState().
• React Components are typically saved in the js/components/ directory because they are written in JavaScript, making the structure convenient to keep the code organized and reducing setup when creating new projects.
• A React component is a function or class that produces React Elements when invoked, potentially containing multiple or nested elements.
• State is an object that keeps track of changing data within a component, and are managed within the component, while Props are used to pass data and event handlers from one component to another, and are managed by the parent component.
• A React component's state is an internal object that holds data used to determine how the component renders and behaves, set with a default value and updated manually or when its props are changed.
• We can embed multiple components into one using ReactDOM.render() and a parent component.
• Babel is a JavaScript Compiler (also known as a Transpiler) that can transform ES6+ JavaScript code into older ES5 code supported by most browsers, enabling developers to use modern language features.
• webpack bundles multiple individual JavaScript files, including those written with ES6 syntax, into a single file, while Babel compiles modern JavaScript code down to backward-compatible versions for browsers.
• The webpack-dev-server bundles your source code and serves it to a local development environment accessible via the URL http://localhost:8080, running by default on port 8080.
• Arrow functions are a concise syntax of function expression referred to as 'fat arrow', which bind to the context of their React components and are most useful with higher-order functions.
• ReactJS is a JavaScript library developed by Facebook in 2013, used for building dynamic, reusable user interfaces for single page applications that can change data without reloading the page through its Virtual DOM.
• ReactJS is a JavaScript library used for building user interfaces and web applications, which relies on state and props to track and pass data, respectively.
• In React, props are passed to a component from outside to provide dynamic data.
• Browsers can only read JavaScript objects, so JSX must be transformed into a JavaScript object using JSX transformers like Babel before being passed to the browser.
• In React, **components are used to divide the UI into small, independent, reusable pieces which are then rendered independently without affecting the rest of the application.**
• The render() method of React components must return a single React element which groups together other HTML elements, and must be kept pure.
• Props are read-only immutable components that are passed down from the parent to the child components in React, helping to maintain a unidirectional data flow and render dynamic data.
• Flux is a application design paradigm based on Unidirectional Data Flow, used to replace the traditional MVC pattern and is used by Facebook internally when working with React.