React.js Interview Questions: React.js is a JavaScript library for building user interfaces. It is written in JavaScript and maintained by Facebook.
React.js Interview Questions

React.js | React.js Interview Questions | Basic

Q:- What is React.js?
React js is an open-source JavaScript library created by Facebook for building complex and interactive UI in web and mobile applications.
Q:- What are the features of React.js?

Major features of React are listed below:

  1. Virtual DOM: It uses the Virtual DOM instead of the real DOM.
  2. Server-Side Rendering: It uses Server-side rendering (SSR).
  3. Uni-Directional: It follows Uni-directional data flow or data binding.
  4. Components: It uses reusable UI components.
Q:- How to Install React.js using Create React App?
Using npx - it’s a package runner tool that comes with npm 5.2+.

Note: To use npx you’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.

npx create-react-app myFirstReactProject cd myFirstReactProject npm start

Note: myFirstReactProject is the name of your project, name it whatever you want.

Note - You can use other package manager like yarn etc.

To know more about react.js installation visit - How to Install React

Q:- What is the difference between NPM & NPX?

NPM: A node package manager

NPX: A npm package runner

Q:- How to specify a port to run a create-react-app based project?

There are two methods:

  1. Environment variable
  2. package.json

If you don't want set environment variable, another option is to modify scripts which is a part of your package.json

For Windows:
>> "start": "set PORT=3006 && react-scripts start"
For Linux & Mac:
>> "start": "PORT=3006 react-scripts start" OR >> "start": "export PORT=3006 react-scripts start"
Q:- What are props in React?
props are immutable properties passed into react components.
  • In React.js props is short for properties.
  • Props are inputs to components.
  • props may be single value or objects containing a set of values.
  • Props are passed to components via HTML attributes.
  • Props always passed down from a parent component to a child component.
  • We can get props using - this.props.PROPS_NAME.
Q:- What is state in React?
State of a component is an object that holds some information that may change over the lifetime of the component.
class Message extends React.Component { constructor(props) { super(props) this.state = { message: 'Welcome to React.js Interview Questions.' } } render() { return () } }
Changing the state Object:
  • use the this.setState() method to change the state.
  • Whenever you will change the state, component will be re-render.
Important Tips:
  • Never use the this.setState() method inside the render.
  • If you will use this.setState() inside componentWillUnmount(), component will not be re-render.
Q:- What is the difference between state and props?
Props State
Props are immutable. State are mutable.
Props is properties, passed from parent to child component. State is managed within the component.
Q:- What is constructor? and main purpose of it?
constructor() method gets called only once during Initial Rendering.

In React.js, constructor are used for:

  • Initializing values of - props and state.
  • Binding event handler methods to an instance.
import React, { Component } from "react"; class myComponent extends Component { constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); } }

Note:

  1. Constructor is called only once in the complete lifecycle of a component.
  2. Constructor is the only place where you should assign this.state directly. In Other React's Lifecycle methods, you should use this.setState().
  3. If you are implementing the constructor, then you should call super(props) before any other statement. if you will not call super(props), this.props will be undefined in the component, which can lead to bugs.
Q:- Is it mandatory to define constructor for React component?

No, it is not mandatory. i.e, If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.

Q:- Difference between constructor and getInitialState ?

The getInitialState belongs to ES5 while constructor belogs to ES6.

getInitialState is used with React.createClass and constructor is used with React.Component.

ES5

var MyComponent = React.createClass({ getInitialState() { return { /* initial state */ }; }, });

ES6

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial state */ }; } }
You may also like - React.js Component Lifecycle Methods
Q:- React ES6 Constructor and super keyword ?
  1. Do we need to call super() inside a constructor?
  2. The answer is YES, if you would like to set a property or access this inside the constructor you need to call super().

    class MyComponent extends React.Component { constructor(props){ this.name = "Hello"; // Error- 'this' is not allowed before super() } //rest code }

    So now we are clear that we need to call super() if we need to use this inside the constructor.

  3. What is the deal with super() vs super(props) ?
  4. props will be undefined inside the constructor of a class if you will not call super(props).

    class MyComponent extends React.Component { constructor(props){ super(); this.state = { name: this.props.name; // here props would be undefined. }; } render() { return(); } }
Q:- What is the difference between super() and super(props)?

When you want to access this.props inside the constructor then you need to pass the props parameter in super keyword.

Q: Does React.js use HTML?

No, It uses JSX.

Q: What is JSX?
JSX stands for JavaScript XML.
  • JSX allows developers to put HTML code inside JavaScript.

  • JSX is type-safe thats why most of the errors can be caught during compile time.

Q:- How to write Expressions and Comments in JSX ?

JavaScript Expressions: We use {} to write expressions in JSX code.

Comments: While writing comments, we need to use curly brackets {}

Expression & Comments in JSX:

5 is equeal to {2+3}

{//Single line Comment...}

{/*Multi-line comment...*/}

Q:- Why browsers can't read JSX?

Browsers can only read JavaScript objects but JSX is not a regular JavaScript object. That's why browsers can't read JSX. To read JSX on browsers first of all we need to transform JSX code into a JavaScript object using Babel and then pass it to the browser.

Q:- Adjacent JSX elements must be wrapped in an enclosing tag?

If you pass multiple tags then react will through error like - Adjacent JSX elements be wrapped in an enclosing tag

Solutions:-
  1. Inside return wrap everything in a single HTML Tag.
  2. Use React.Fragment

React.js | React.js Interview Questions | Intermediate

Q:- What is Components?
Components are independent and reusable piece of code.

React Components are the core building blocks of any React App.

Types of Components:
  1. Functional Component (Stateless Component) - only props, no state
  2. Class Component (Stateful Component) - both props and state.
1. Functional Component: (Stateless)
  • It is just simple function which return JSX.
  • Functional component doesn't have render() method.
  • In functional component we can use only props not state.
  • We can not use react's lifecycle methods inside functional component.

Note- React 16.8+ provide lots of hooks (e.g. - useState, useEffect, etc) which provides same functionality without using class component.

2. Class Component: (Stateful)
  • It is also retruns JSX.
  • It has render() method.
  • In class component we can use both props and state.
  • We can use react's lifecycle methods inside class component.
Note:
  • Always start component names with a capital letter.
  • React treats components starting with lowercase letters as DOM tags.
Q:- What is the difference between Controlled vs Uncontrolled Component?

In controlled component, form data is handled by a React component.

In uncontrolled components, form data is handled by the DOM itself.

Features Uncontrolled Controlled
One time value retrieval (e.g. on submit)
Validating on submit
Instant field validation
Conditionally disabling submit button
Dynamic Inputs
Q:- Why React Component's Names Must Start with a Capital Letter?

In JSX, if you will write component's name in lowercase, it will consider it as normal HTML tag, so developer should follow react.js guidelines.

Q:- What is the major advantages of using React.js?

Folllowing are the list of some major advantages of using React.js:

  1. Performance : it is really good performance because React Js uses virtual-DOM
  2. Rendering : it's render server side and client side both as well
  3. Reusability: React Js is all about components. So React js provides developers with the opportunity to have more time to use and create common abstractions, setting up the creation, distribution and consumption of isolated reusable parts.
  4. JSX: JSX makes it easy to read the code of your components
  5. Data Binding: React Js uses one way data binding or uni directional data flow
  6. Testability: it is easy to test, and integrate some tools like jest.
  7. Maintainability: it ensures readability and makes maintainability easier.
  8. Better Combination Technologies: React makes best use of HTML and JavaScript mixing them ideally and also incorporates CSS to provide your business with the best.
  9. Integrate With Others Framework: it’s easy to integrate with other frameworks like Backbone.js, Meteor, Angular, etc.
Q:- In which component's of lifecycle method one should make an AJAX call?
You should make AJAX request in componentDidMount() method.

Folllowing are the best libraries for making AJAX calls in React.js:

  1. Fetch - It is a promise based simple and standardised method to make API calls.
  2. Axios - It Promise based HTTP client for the browser and node.js
  3. jQuery $.ajax - It is basic way to make AJAX calls.
  4. Superagent - It is a light weight AJAX API library created for better readability and flexibility.
Q:- What is render() function and it's uses in React?
In react, render is a method that tell react what to display.
  1. render() is the most widely used method in react lifecycle.
  2. render() method is required when you are writing a class based component.
  3. render() method called by default because it needs to display the HTML markup (JSX).
  4. render() method returns only one react element (DOM component). If you wants to return multiple HTML elements it must be wrapped inside one HTML Tag or Inside Fragment.
Q:- Why do we use Keys in React?

Keys helps React to identify which items have changed, are added, or are removed in the DOM tree.

To avoid unnecessary re-rendering pass a unique value as key.

Q:- What are React Events?

React Events are reactions which are triggered by specific user actions like Button Click, Mouse Hover, etc.

Q:- What is the Virtual DOM? Explain it's working?
Virtual DOM is in-memory representation of Real DOM

Virtual DOM is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called reconciliation.

You may also like - ES6 Interview Questions Answers

React.js | React.js Interview Questions | Advanced

Q:- What is Redux?
Read more about - Redux Interview Questions Answers
Q:- What is Reconciliation?
Reconciliation is the process through which React updates the DOM.

Whenever a component's props or state changes, then React.js decides whether Real DOM update is necessary by comparing the newly returned element with the previously rendered one with the help of Virtual DOM. If both are not equal, React updates the DOM. This process is called "reconciliation".

The algorithm which react use behind this is called - Diffing Algorithm.

Q:- Is the Shadow DOM the same as the Virtual DOM?

No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components.

Q:- What is "React Fiber"?

Fiber is the new reconciliation engine in React 16.

Its main goal is to enable incremental rendering of the virtual DOM.

Q:- Difference between Real DOM and Virtual DOM?
Real DOM Virtual DOM
It updates slow. It updates faster.
It Can directly update HTML. It Can’t directly update HTML.
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 of memory wastage. No memory wastage.
You may also like - Node.js Interview Questions Answers
Q:- ESLint and name some popular React-specific linters?
  • ESLint is a popular JavaScript linter.
  • Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.
  • One of the most common for React is an npm package called eslint-plugin-react.

Advantages of Using ESLint

  • You will find bugs and errors before they happen.
  • You will spend less time testing new features.
  • Your code (and your team’s code) will be more consistent.
Q:- How can we find the version of React at runtime in the browser?
const REACT_VERSION = React.version;
Q:- What is Hooks? When and Where would I use a Hooks?
Hooks:

Hooks are a new addition in React 16.8. Hooks provides facility to developers so that they can you use state and other React features without writing a class.

useState is a Hook that lets you add React state to functional (Stateless) components.

import React, { useState } from 'react'; function myFunction() { // Code Snippets }
When would I use a Hooks?

If you are making a functional component and if you need to add/use state to inside that functional component, then you can use a Hook inside the existing functional component.

Where would I use a Hooks?
  1. Hooks should be used only inside functional components.
  2. Hooks can be used inside your another own custom Hooks.
Q:- What is Pure Component?
A Pure Component renders only if there is any actual changes happens in props and state.
Read more about - React.js Pure Component with Examples
Q:- What is Higher Order Components (HOC) in React.js?
A Higher Order Component is a function that takes a component as an input argument and returns a new component.
Read more about - Higher Order Components with Example
Q:- What Debugging Tools are being used for Testing React Applications?
  1. Linters (eslint, jslint)
  2. Debuggers (React Developer Tools)
Q:- Is React Declarative or Imperative?

React is Declarative.

React is declarative because we write the code that we want and React is in charge of taking our declared code and performing all of the JavaScript/DOM steps to get us to our desired result.

In declarative programming, developers only describe what they want to achieve and there's no need to list all the steps to make it work.

Q:- What the major disadvantages of using React.js?

Folllowing are the list of some major disadvantages of using React.js:

  1. It covers only 'View' part in MVC (Model-View-Controller).
  2. React Js is just a JavaScript library, Not a framework.
  3. It's library is very large and takes time to understand.
  4. it uses inline templating and JSX.

React.js used by Facebook, Instagram, Netflix, PayPal, Apple etc. One of the most important reason may be it has very high demand in IT Industry. If you know Reactjs very well you can get very high Package. Learn React.js - React.js Tutorial

Q:- How is React different from Angular?
Keys React Angular
Architecture Only the View of MVC Complete MVC
Language JSX TypeScript
Rendering Server side rendering Server side rendering (Angularjs - Client Side)
DOM Uses virtual DOM Uses real/regular DOM
Data Binding Uni-Directional: One-way data binding Bi-Directional: Two-way data binding
Debugging Compile time debugging Run time debugging
Learning Curve Low Medium
Author Facebook Google