React.js Interview Questions and Answers

React js is an open-source JavaScript library created by Facebook for building complex and interactive UI in web and mobile applications.

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.

Reactjs can be installed on your local machine by using following ways:

1. npx
2. npm
3. yarn
4. create-react-app

Reactjs step by step installation guide, please visit - How to Install Reactjs

NPM: A node package manager

NPX: A npm package runner

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: For Linux & Mac:

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.

State of a component is an object that holds some information that may change over the lifetime of the component.

• use the this.setState() method to change the state.
• Whenever you will change the state, component will be re-render.

• Never use the this.setState() method inside the render.
• If you will use this.setState() inside componentWillUnmount(), component will not be re-render.

Props	State
Props are immutable.	State are mutable.
Props is properties, passed from parent to child component.	State is managed within the component.

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.

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.

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.

The getInitialState belongs to ES5 while constructor belogs to ES6.

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

ES5

ES6

You may also like - React.js Component Lifecycle Methods

1. Do we need to call super() inside a constructor?

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.

2. What is the deal with super() vs super(props) ?

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(); } }

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

No, It uses 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.

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...*/}

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.

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

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

Components are independent and reusable piece of code.

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

1. Functional Component (Stateless Component) - only props, no state
2. Class Component (Stateful Component) - both props and state.

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

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

• Always start component names with a capital letter.
• React treats components starting with lowercase letters as DOM tags.

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	❌	✅

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.

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.

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.

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.

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.

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

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

Read more about - Redux Interview Questions Answers

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.

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

Fiber is the new reconciliation engine in React 16.

Its main goal is to enable incremental rendering of the 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

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

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.

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.

1. Hooks should be used only inside functional components.
2. Hooks can be used inside your another own custom Hooks.

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

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

1. Linters (eslint, jslint)
2. Debuggers (React Developer Tools)

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.

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

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