React

Everything in React are referred as Components. We can have one giant component containing all our code, but React’s best practices are to divide our logic into smaller components and reuse them. Like we have a header component, footer component, Service Page Component, Home Page component and so on. There are actually two ways to create Components - Functional Components and Class Based components.

We have already seen examples of both types of Components. Below is an example of the functional component. As the name suggests, it is created using functions.

import React from ‘react’;
const DemoPage =() => {
return(
<div>
  <h1>{1+1}</h1>
</div>
)
};
export default DemoPage;
Now we have seen Class-Based components also earlier.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
 render() {
   var i =1;
   return (
     <div className="App">
       <header className="App-header">
       { i === 1 ?
         <img src={logo} className="App-logo" alt="logo" /> :
         <a href="https://reactjs.org" target="_blank">
           Learn React
         </a>
       }
       </header>
     </div>
   );
 }
}
export default App;

This is a simple class-based component. But most class-based components have the concept of state(which we will see later), which is not possible in Function based Components.

A staple in React interview coding challenges, be prepared to answer this one.

Props or properties are React ways of passing data from parent component to child component. Props can be passed to both Function based components or class-based components.

Consider this React code for About Page.

import React from ‘react’;
import Header from ‘./HeaderPage’;
import Footer from ‘./FooterPage’;
const AboutPage =() => {
return(
<div>
 <Header text=“Hero Company” subText=“Cool Company” />
  <h1>About Us</h1>
  <p>We are a cool web development company,
located in Silicon Valley.</p>
 <Footer />
</div>
)
};
export default AboutPage;

Now the code for Header.

import React from ‘react’;
const Header =() => {
return(
<div>
  <h1>{props.text}</h1>
  <h2>{props.subText}</h2>
</div>
)
};

export default Header;

In the above, we pass two props text and subText from Parent Component AboutPage to Child Component Header. We access the props in Child Component by the keyword props dot and the prop name. Notice, that we used the {} because props.text is a JavaScript statement and that is how we access JavaScript inside React.

There is a slightly different way to access props in class-based components. Here we access props in child components by this.props. Changing our Header Component to class-based component.

Consider this React code for About Page.

import React from ‘react’;
import Header from ‘./HeaderPage’;
import Footer from ‘./FooterPage’;
const AboutPage =() => {
return(
<div>
 <Header text=“Hero Company” subText=“Cool Company” />
  <h1>About Us</h1>
  <p>We are a cool web development company,
located in Silicon Valley.</p>
 <Footer />
</div>
)
};
export default AboutPage;

Now the code for Header.

import React, { Component } from ‘react’;
class Header extends Component {
render() {
return(
<div>
  <h1>{this.props.text}</h1>
  <h2>{this.props.subText}</h2>
</div>
)
}
export default Header;

This question is a regular feature in React questions, be ready to tackle it.  

When we want to change the data inside a Component we use state. It is one of the most important and difficult concepts in React to understand.

We need to initialise the state first. After that, we need to change the state. Consider the updated code for App.js from our JSX example(Question 5)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
 constructor(){
   super();
   this.state = {
     spinLogo: true
   };
   this.updateLogo = this.updateLogo.bind(this);
 }
 updateLogo() {
   this.setState({
     spinLogo: !this.state.spinLogo
   });
 }
 render() {
   return (
     <div className="App">
       <header className="App-header">
       { this.state.spinLogo === true ?
         <img src={logo} className="App-logo" alt="logo" /> :
         <a href="https://reactjs.org" target="_blank">
           Learn React
         </a>
       }
       <button onClick={this.updateLogo}>Click me!</button>
       </header>
     </div>
   );
 }
}
export default App;

Initializing State
To initialize the state, simply set this.state in the constructor() method of the class. Our state is an object which in our case only has one key called spinLogo. Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.

In our render method, we are checking the value of spinLogo by this.state.spinLogo. It is initially true, so the logo will be displayed.

Now, we have a button which has an event listener onClick. When we click the button it runs the function updateLogo() and we change the state.

Changing the state

To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateLogo.  So, here we change the value of updateLogo to the opposite of it. Initially, it was true, so we make it false.

One important concept in React is that whenever we call this.setState(), it re-renders the Component. So, this time when the ternary operator checks the value of this.state.spinLogo, it is false. So, it displays the link. Click the button again and it will show the logo.

Sites built with vanilla JavaScript directly updates the Real DOM. It is fine for smaller websites, but as your website grows complex, it slows down the website. This happens because the browser engine has to traverse all nodes even if you update only one node.

Even Angular updates or work on Real DOM. ReactJS doesn’t update the Real DOM directly but has a concept of Virtual DOM. This causes a great performance benefit for ReactJS and so it’s faster than vanilla JavaScript apps and also Angular apps.

• Virtual DOM is actually an in-memory representation of Real DOM. It is a lightweight JavaScript Object which is a copy of Real DOM.
• Whenever setState() method is called in your code, ReactJS creates the whole Virtual DOM from scratch.
• At a given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and the other with the previous state Virtual DOM.
• ReactJS uses a differential algorithm to compare both of the Virtual DOM to find the minimum number of steps to update the Real DOM.

After that, it updates the Real DOM, whenever it’s best to update it.

Using jQuery in React is not recommended as it directly interacts with the DOM and is generally a bad practice. We should always try first to find a React equivalent of the jQuery plugin or write the plugin ourselves. But many times there are plugins, which are only available in jQuery and no other alternative in ReactJS and also very time consuming to write ourselves. In such cases, we can use the method described below.

We attach a “ref” element to the root DOM element. Inside componentDidMount, we will get a reference to it, so that we can pass it to the jQuery plugin.

To prevent React from interacting with the DOM after mounting, we will return an empty <div /> from our render() method. The <div /> element has nothing, so React will not update it, leaving the jQuery plugin to manage only that part of the DOM. Also, we will use componetWillUnmount() to unmount the jQuery plugin, after its work with DOM is done.

class anotherJqueryPlugin extends React.Component {
 componentDidMount() {
   this.$el = $(this.el);
   this.$el.anotherJqueryPlugin();
 }
 componentWillUnmount() {
   this.$el.anotherJqueryPlugin('destroy');
 }
 render() {
   return <div ref={el => this.el = el} />;
 }
}

Refs are generally avoided in React and should be used with precautions. It is because they directly interact with the Real DOM and in React that is not desirable behaviour.

We can, however, use refs in the following situations.

• Interaction with third party libraries like jQuery.
• Doing animations
• Managing focus when we move to a text box

There are many ways to use “refs” but we will see the way introduced in React 16.3 and that is by using React.createRef()

In the example for Ref, we have an input box. When we click on the submit button, we’ll read the value entered by the user and log it to the console. The same thing we could have achieved by using normal state and setState also.

class RefTextInputDemo extends React.Component {
 constructor(props) {
   super(props);
   // create a ref to store the text Input element
   this.inputNewItem = React.createRef();
 }
 handleClick = e => {
   e.preventDefault();
   console.log(this.inputNewItem.current.value);
 };
 render() {
    // tell React that we will associate the <input> ref
    // with the `inputNewItem` that was created in the constructor
   return (
     <div>
       <form onSubmit={e => this.handleClick(e)}>
         <input type="text" ref={this.inputNewItem} />
         <button>Submit</button>
       </form>
     </div>
   );
 }
}

Webpack and Babel are the tools which run in the background to turn our React project into vanilla HTML, CSS, and JavaScript. It is necessary because that only can be processed by the browser.

Webpack in basically a module builder. Webpack mainly runs during the development process.

We have taken the below diagram from https://webpack.js.org/ website. It is quite self-explanatory on what actually webpack does. As per the diagram, it takes your “js”, “sass” and other files and converts them to vanilla “js”, “css”, “jpg” and “png” files, which the web browser can understand.

Now, when we create our app with create-react-app, webpack is included in it by the Facebook team. If we are using something like SCSS in our project, it gets converted into vanilla CSS.

Babel, on the other hand, is a JavaScript compiler that converts latest JavaScript like ES6, ES7  into plain old ES5 JavaScript that most browsers understand (even the old ones- like IE8).
In React land its main use is to transform our JSX code into vanilla JavaScript. As per the Babel website https://babeljs.io/ , Here are the main use of Babel:

• Transform your syntax
• Polyfill the features that are missing in the target environment.
• Source code transformations (codemods)

A simple example of what Babel does for an arrow function, which we introduced in ES6.

// Babel Input: ES6 arrow function
[5, 9, 7].map((i) => i + 1);
// Babel Output: ES5 
[5, 9, 7].map(function(i) {
 return i + 1;
});

Below is how a simple React JSX line gets converted into the way it is actually used inside React with createElement.

This is a frequently asked question in React interview questions.  

React Fragments is a much-needed feature introduced in  React 16.2 that helps us to get rid of wrapper div, used inside components.

We will consider the below React code. Here we have a code for a simple Todo, which has an adjacent “h2” and a “ol” tag.

render() {
   return (
       <h2>Todos:</h2>
       <ol>
       {this.state.items.map(item => (
         <li key={item.id}>
           <label>
             <input type="checkbox" checked={item.done} />
             <span className={item.done ? "done" : ""}>{item.text}</span>
           </label>
         </li>
       ))}
       </ol>
   )
 }
}

If we run the above code like this only, we will get the most common React error.

SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag (21:8)   19 | return (   20 | <h2>Todos:</h2> > 21 | <ol> | ^ 22 | {this.state.items.map(item => (   23 | <li key={item.id}> 24 | <label>

To fix this error, we will wrap everything inside a <div> tag.

render() {
   return (
   <div>
       <h2>Todos:</h2>
       <ol>
       {this.state.items.map(item => (
         <li key={item.id}>
           <label>
             <input type="checkbox" checked={item.done} />
             <span className={item.done ? "done" : ""}>{item.text}</span>
           </label>
         </li>
       ))}
       </ol>
     </div>  
   )
 }

Now, the unnecessary “div” creates a lot of problems. Suppose, we are using Flexbox in our parent component and this was a Child Component and the <h2> and <ol> were flex children. Now we introduce this <div> since in Flexbox it will be considered as a flex item, this will break our CSS style.

Now, we can use Fragments instead of <div> to get rid of the additional problem it caused. Fragment doesn’t have any special meaning to browser, so the problem of Flexbox item is solved.

render() {
   return (
   <React.Fragment>
       <h2>Todos:</h2>
       <ol>
       {this.state.items.map(item => (
         <li key={item.id}>
           <label>
             <input type="checkbox" checked={item.done} />
             <span className={item.done ? "done" : ""}>{item.text}</span>
           </label>
         </li>
       ))}
       </ol>
     </React.Fragment>  
   )
 }

We can also get rid of  React.Fragment, if we import Fragment in the import statement.

import React, { Component, Fragment } from 'react';
...
render() {
   return (
   <Fragment>
       <h2>Todos:</h2>
       <ol>
       {this.state.items.map(item => (
         <li key={item.id}>
           <label>
             <input type="checkbox" checked={item.done} />
             <span className={item.done ? "done" : ""}>{item.text}</span>
           </label>
         </li>
       ))}
       </ol>
     </Fragment>  
   )
 }

JavaScript is a loosely-bound language, which causes many errors in code. So, we should implement type-check, for different props been passed from Parent to Child component. Earlier it used to be a part of React library but since React v15.5, it has moved as a separate library. So, we need to npm install it and then import it by-

import PropTypes from ‘prop-types’;

Let consider the below example for PropType.

import React from ‘react’;


class ReactProptypesDemo extends React.Component {  
 render() {
   return (
     <div>
       <TestForProptypes
         str="Hriday"
         strOrNumber={10}  
         arr={[5,6,2]}
         arrOfObject={[{name: "Chinu", age: 36}, {name: "Shik", age: 35}]}
       />
     </div>
   )
 }
}
const TestForProptypes = (props) => {
return (
  <React.Fragment>
       <h3>{props.str}</h3>
       <h4>{props.strOrNumber}</h4>
       <div>{props.arr.map(itm=> <li key={itm}>{itm}</li>)}</div>
       <div>{props.arrOfObject.map(itm=> <li key={itm.age}>{itm.name}</li>)}</div>
     </React.Fragment>
     );
}
TestForProptypes.propTypes = {
str: PropTypes.string,
 strOrNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 arr: PropTypes.arrayOf(PropTypes.number),
 arrOfObject: PropTypes.arrayOf(PropTypes.shape(
  {
        name: PropTypes.string,
         age: PropTypes.number
       }
 ))
}
ReactDOM.render(<ReactProptypesDemo />, document.querySelector("#app"))

Here we have a parent component ReactProptypesDemo which is passing props to TestForProptypes. So, for each prop, we check whether it is the correct type or not.

In TestForProptypes.propTypes , we check for each prop. 

Like for the “str” prop, we can check by -

str: PropTypes.string

For the array prop “arr” we can check as -

arr: PropTypes.arrayOf(PropTypes.number)

For the array of object prop “arrOfObject” we can check as -

arrOfObject: PropTypes.arrayOf(PropTypes.shape(
    {
        name: PropTypes.string,
         age: PropTypes.number
       }
 ))

We have a check also for String or Number prop “strOrNumber” as below -

strOrNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number])

if we pass “boolean” to it instead of string or number.

<TestForProptypes
         str="Nabendu"
         strOrNumber={true}  
         arr={[3,1,2]}
         arrOfObject={[{name: "Nabs", age: 36}, {name: "Shikha", age: 35}]}
       />

We will get the below error in console.

Warning: Failed prop type: Invalid prop `strOrNumber` supplied to 
`TestForProptypes`.     
in TestForProptypes (created by ReactProptypesDemo)     
in ReactProptypesDemo

First of all setting the state directly by this.state.name=”Thomas” is not recommended in React.
In React we should never mutate state directly instead of using setState to change the state.

One more drawback of setting state directly is that React’s lifecycle methods — shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate() and render()- depend on state transitions being called with setState().

A Pure function is a function which :
* Given the same input, will always return the same output.
* Produces no side effects.

Consider the below example:

Math.random(); // => 0.4011148700956255
Math.random(); // => 0.8533405303023756
Math.random(); // => 0.3550692005082965

Even though we didn’t pass any arguments into any of the function calls, they all produced different output, meaning that `Math.random()` is not pure.

Now consider the below add function doesn’t alter “a” or “b”, always returns the same output for the same input.
So, it’s a “pure” function

const add = (a, b) => a + b //pure function

The second condition is that it should not produce any side effects. It basically means it should not change any external state.

Consider, the below code. The function addNum changes the values of external “a”, so it’s not a pure function.

var a = 10;
function addNum(num) {
 a = 20;
 return num + a;
}
console.log(addNum(5)); //25
console.log(a); //20

Reducers are Pure Functions as they don’t mutate the state. It generates a new state which is a copy of the old state.

const initialState = {
   indPopData: [],
};
const dataReducer = (state = initialState, action) => {
   let newState;
   switch (action.type) {
     case types.GET_INDIA_DATA:
       newState = { ...state, indPopData: action.indPopData };
       break;
     default:
       newState = state;
   }
   return newState;
 };

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys

Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays

To understand this you need understand how the virtual DOM works in React. The virtual DOM (VDOM) 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.

Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created Updating browser DOM is as follows

1. Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
2. The difference between the previous Virtual DOM representation and the new one will be calculated.
3. The real DOM will be updated with what has actually changed. This is very much like applying a patch.

Look at the example given below

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
render() {
const numbers = [1,2,3,4,5];
const listItems = numbers.map((number) =>
<li>
{number}
</li>
);
return (
<div className="App">
<h2>Hellow World!!</h2>
<div>{listItems}</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This will throw a warning in console

• Warning: Each child in an array or iterator should have a unique "key" prop.
• To fix it we should change the arrow function “listItems” to

const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);

A must-know for anyone heading into a React interview, this question is frequently asked in advanced React interview questions.

React lets you define components as classes or functions. Components defined as classes currently provide more features To define a React component class, you need to extend React.Component.

class App extends React.Component {
render() {
return (
<div className="App">
<h2>Hellow World!</h2>
</div>
);
}
}

The only method you must define in a React.Component subclass is called render() All the other methods described on this page are optional.

Each component has several “lifecycle methods” that you can override to run code at particular times in the process .

Lifecycle methods can be classified into four.

1. Mounting
2. Updating
3. Unmounting
4. Error handling

Mounting

Methods are listed in the order of their execution

constructor()

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

Typically, in React constructors are only used for two purposes:

1. Initializing local state by assigning an object to this.state.
2. Binding event handler methods to an instance.

static getDerivedStateFromProps()

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

This method exists for rare use cases where the state depends on changes in props over time.

This method doesn’t have access to the component instance. If you’d like, you can reuse some code between getDerivedStateFromProps() and the other class methods by extracting pure functions of the component props and state outside the class definition.

NOTE that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.

render()

• The render() method is the only required method in a class component.
• When called, it should examine this.props and this.state and return one of the following types:
• React elements. Typically created via JSX.
• Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
• String and numbers. These are rendered as text nodes in the DOM.
• Booleans or null. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean.)

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.

componentDidMount()

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

Updating An update can be caused by changes to props or state. Methods are listed in the order of their execution

static getDerivedStateFromProps(): Mentioned above

shouldComponentUpdate()

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used.

Note that returning false does not prevent child components from re-rendering when their state changes.

Currently, if shouldComponentUpdate() returns false, then UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

render(): mentioned above

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().

This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.A snapshot value (or null) should be returned.

componentDidUpdate()

• componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
• Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
• You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance. If you’re trying to “mirror” some state to a prop coming from above, consider using the prop directly instead.
• NOTE componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

Unmounting

This method is called when a component is being removed from the DOM:

componentWillUnmount()

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

static getDerivedStateFromError()

This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

getDerivedStateFromError() is called during the “render” phase, so side-effects are not permitted. For those use cases, use componentDidCatch() instead.

componentDidCatch()

This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:

1. error - The error that was thrown.
2. info - An object with a componentStack key containing information about which component threw the error.
3. componentDidCatch() is called during the “commit” phase, so side-effects are permitted. It should be used for things like logging errors:

In the event of an error, you can render a fallback UI with componentDidCatch() by calling setState, but this will be deprecated in a future release. Use static getDerivedStateFromError() to handle fallback rendering instead.

It's no surprise that this one pops up often in advanced React interview questions.  

React.PureComponent is one of the most significant ways to optimize React applications that is easy and fast to implement. The usage of React.PureComponent gives a considerable increase in performance because it reduces the number of render operation in the application.

By default, a plain React.Component has shouldComponentUpdate set to always return true.
One way to deal with these extra re-renders is to change the shouldComponentUpdate function to check when your component needs to update

A common pitfall when converting from Component to PureComponent is to forget that the children need to re-render too. As with all React - if the parent doesn’t re-render the children won’t either. So if you have a PureComponent with children, those children can only update if the parent’s state or props are shallowly different (causing the parent to re-render).
You can only have a PureComponent parent if you know none of the children should re-render if the parent doesn’t re-render.
If your React component’s render function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

This is how React shallow compares (copied from React source code)

Code sample below

In the given example when we extend Display component from React.Component the render function will be called each time you click the button.

Instead if you extend the Display component from React.PureComponent the render function will be called only once. That means it calls render when the prop Is shallowly different

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Display from "./Display";
function App() {
return (
<div className="App">
<Display chek={10} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";
class Display extends React.PureComponent {
constructor(props){
super(props);
this.state = {
obj1: 1
}
}
updateMe = () => {
this.setState({
obj1: this.props.chek
});
};
render(){
console.log("render called");
return (
<>
<div>{this.state.obj1}</div>
<div>
<button type="submit" onClick={this.updateMe}>
click here
</button>
</div>
</>
)
}
}
export default Display;

import React from "react";
class Display extends React.Component {
constructor(props){
super(props);
this.state = {
obj1: 1
}
}
updateMe = () => {
this.setState({
obj1: this.props.chek
});
};
render(){
console.log("render called");
return (
<>
<div>{this.state.obj1}</div>
<div>
<button type="submit" onClick={this.updateMe}>
click here
</button>
</div>
</>
)
}
}
export default Display;

This is recommended to avoid side effects. Render method will get called immediately after the componentWillMount and no way we can make the render method wait until the API has returned.

Constructor is a place where we define the variables and not make any API calls. API calls can have side effects and should not be used inside constructor

React expects state to be available as render function will be called next after componentWillMount and code can break if any mentioned state variable is missing which may occur in case of ajax API calls

One more reason is If we are doing server-side rendering of React components componentWillMount will get called on the server-side and again on the client, resulting in calling fetch two times. Hence, this is not definitely the place where we should integrate our APIs.

NOTE: A side effect is any application state change that is observable outside the called function other than its return value. Eg: modifying a global variable

Expect to come across this popular question in React interview questions for experienced.

When a React App loads for the first time, the code is run in the mentioned order. All the below-mentioned methods run only one time except “render()”, which can be run many times depending on setState and Parent component be called.

1) The “constructor()” is the first thing to be called. You can set the initial state here like below.

 constructor(){
   super();
   this.state = {
     spinLogo: true
   };
 }

2) Then the “componentWillMount()” will be called. It is very similar to the constructor and called only once before the initial mounting of DOM. That is the reason, it doesn’t have access to the DOM. React documentation recommends us to use constructor instead of this lifecycle method and it will be soon deprecated.

3) Then the initial “render()” will be called. It will also render all the child components(if any) of this component. Also, note that render is generally called many times. Whenever we use setState, the component render is called.

4) Then the function “componentDidMount()” will be called. This function will also be called once during the whole life-cycle. It is a great place to do AJAX call to the server to fetch some data. You can also initialize something that requires interaction with the DOM, like a jQuery library.

There is a type of re-rendering, which happens to all child components when the parent component re-renders.

It also happens when you are using a React-redux model and the server call request have been completed and you have just received new props in mapStateToProps().

• The “componentWillReceiveProps()” will be called whenever the component receives a new set of props. This lifecycle method is a case of common use, when we receive props back from redux in mapStateToProps(). After that we can set the state depending on props, as calling this.setState here will not cause a re-render.

componentWillReceiveProps(nextProps) {
if (this.props.chinaPopData !== nextProps.chinaPopData) {
this.setState({
    chinaPopData: nextProps.chinaPopData.map(item => {return {name:     item.aged, value:item.totaled}}))
});
}

• The “shouldComponentUpdate()” lifecycle method is an method, by which we can decide whether to render a component or not. It is mainly used to increase the performance of poor performing components.

If we return false, it means React will not execute the lifecycle methods - componentWillUpdate() and componentDidUpdate() and also the render()

If it is not used in the project, then React internally gives the default value of true to it.

• The next to execute is the lifecycle method “componentWillUpdate()”. This method is called before the render(), but not during the initial first render. It can be used as a replacement of componentWillReceiveProps() because it is called whenever props are passed to the component or state is changed.
• Next, the render() of the component is called and with it, all child components(if any) will be called.
• Lastly the “componentDidUpdate()” lifecycle method will be called. This method is called after the render(). It is a good place to work with any third party library requiring access to the DOM, like a jQuery plugin.

The component in which this.setState is called, is re-rendered including its child components.  All of the lifecycle methods was already explained in Question 11 and Question 12. Below is the diagram for the same.

There are two new lifecycle methods introduced in React 16.3. Their main task is replacing the old error-prone lifecycle methods like componentWillUpdate and componentWillReceiveProps. You can still use these old lifecycle methods in your project but only till React 17 is released. These old lifecycle methods are now called - UNSAFE_componentWillUpdate and UNSAFE_componentWillReceiveProps.

static getDerivedStateFromProps(nextProps, prevState)
This lifecycle method is invoked before calling render(), both on the initial mount and subsequent mounts. It’s main job is replacing componentWillReceiveProps which is now called UNSAFE_componentWillReceiveProps.

getSnapshotBeforeUpdate(prevProps, prevState)
This lifecycle method is called right before the changes from VDOM are to be committed to the Real DOM. It enables your component to capture some information from the DOM like mouse position before it is changed. The returned value by this lifecycle will be passed as a parameter to componentDidUpdate().

So, the new order of mounting is -

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

The order of update caused by changes in any props or state is -

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Updating state from these lifecycles lets you capture an unhandled JavaScript error in the below tree and display a fallback UI.

static getDerivedStateFromError()
This lifecycle is invoked after an error has been thrown by a component. It receives the error that was thrown as a parameter and should return a value to update state.

As it is called during the render phase so side-effects like this.setState are not allowed.

componentDidCatch()
This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:

• error - The error that was thrown.
• info - An object with a componentStack key containing information about the component which threw the error.

As it is called during the commit phase so side-effects like this.setState are allowed.

Below is the example where we define a component called ErrorBoundary

class ErrorBoundary extends React.Component {
 constructor(props) {
   super(props);
   this.state = { hasError: false };
 }
 static getDerivedStateFromError(error) {
   // Update state so the next render will show the fallback UI.
   return { hasError: true };
 }
 componentDidCatch(error, info) {
   logComponentStackToMyService(info.componentStack);
 }
 render() {
   if (this.state.hasError) {
     return <h1>Something went wrong.</h1>;
   }
   return this.props.children;
 }
}

After this we need to wrap any component with it and try will work as the classic try..catch block.

<ErrorBoundary>
 <ProductCard />
</ErrorBoundary>

In React Land, data is passed top-down from parent component to child component via props. But many times props are needed by a component, which is more than 10 levels deep. In such a scenario, the middle components are just passing the props. This unnecessary passing of props is an issue and is called prop drilling. This is where state management like Redux and Flux comes into the picture, which maintains one single central state.

But with Redux, the complexities of reducers and middleware also comes. It is good for a large application, but not for small or middle size applications.

Let’s first look into the example by passing props through an unnecessary component. We have a GrandFather component, which has a state called familyName. This is needed by the Child component. But we also have Father component in between, so we just pass familyName through it.

class GrandFather extends React.Component {
 state = {
   familyName: "Das"
 }
 render() {
   return <Father familyName={this.state.familyName} />
 }
}
const Father = ({ familyName}) => {
 return <Child familyName={familyName} />
}
const Child = ({ familyName }) => {
 return <p>{familyName}</p>
}

We can refactor the above to use the new Context API. Using Context means we don’t need to pass the familyName unnecessary through the <Father /> component. Here first we create our FamilyContext by React.createContext()

const FamilyContext = React.createContext({});
class GrandFather extends React.Component {
 state = {
   familyName: "Das"
 };
render() {
   return (
     <FamilyContext.Provider value={this.state.familyName}>
       <Father />
     </FamilyContext.Provider>
   );
 }
}
const Father = () => {
 return <Child />;
};
const Child = () => {
 return <FamilyContext.Consumer>{context => <p>{context}</p>}
</FamilyContext.Consumer>;
};
ReactDOM.render(<GrandFather />, document.querySelector("#app"))

Now, we will wrap the <Father /> component with <FamilyContext.Provider /> as it contains <Child />.Notice that the Provider has a value prop. Pass in whatever state you’d like to share to any Component deep down.

To have access to the familyName, we have also wrapped the <p> tag in the <FamilyContext.Consumer /> component so that it has access to the context.

Pure Component are special type of Components in React, which doesn’t re-render itself if the state is not changed. In ReactJS if we do a this.setState, it re-renders the Component and it’s child components.

Consider the below example. The initial state value is 1. It has a “componentDidMount” by which we are simulating AJAX call by running a setInterval, every 2 seconds. It has a this.setState, but sets the value again to 1. But because this.setState runs, it re-render the component.

import React from ‘react’;
class PureDemo extends React.Component {
 constructor(props) {
   super(props)
   this.state={
    value: 1
   }
 }
  componentDidMount() {
   setInterval(() => {
     this.setState({ value: 1})
    }, 2000)
  }  
 render() {
 console.log('Render PureDemo');
   return (
     <Demo value={this.state.value} />
   )
 }
}
const Demo = (props) => {
 console.log('Render Demo');
return <div>{props.val}</div>
}
ReactDOM.render(<PureDemo />, document.querySelector("#app"))

If we run the below, both components will be rendered after every 2 seconds and we will get the below printed in the console.

Now, we can solve this issue of not rendering components if state is not changed, by using lifecycle hook shouldComponentUpdate. It will run in each render and here we are checking if the current state is equal to the next state. If they are equal, we are returning false and the components will not re-render.

class PureDemo extends React.Component {
 constructor(props) {
   super(props)
   this.state={
    value: 1
   }
 }
 componentDidMount() {
  setInterval(() => {
    this.setState({ value: 1})
   }, 2000)
 }
 shouldComponentUpdate(nextProp, nextState) {
    return (this.state.value === nextState.value ? false : true )
  } 
 render() {
 console.log('Render PureDemo');
   return (
     <Demo value={this.state.value} />
   )
 }
}
const Demo = (props) => {
 console.log('Render Demo');
return <div>{props.value}</div>
}
ReactDOM.render(<PureDemo />, document.querySelector("#app"))

The same thing can be achieved by using Pure Components, instead of a normal component. It will behave similarly to the above code with shouldComponentUpdate.

class PureDemo extends React.PureComponent {
 constructor(props) {
   super(props)
   this.state={
    value: 1
   }
 }
 componentDidMount() {
  setInterval(() => {
    this.setState({ value: 1})
   }, 2000)
 }
 render() {
 console.log('Render PureDemo');
   return (
     <Demo val={this.state.value} />
   )
 }
}
const Demo = (props) => {
 console.log('Render Demo');
return <div>{props.value}</div>
}
ReactDOM.render(<PureDemo />, document.querySelector(“#app"))

A must-know for anyone heading into a React interview, this question is frequently asked in React interview questions.

In vanilla JavaScript, we have the concept of Higher Order Functions, in which we pass a function to another function as an argument. In React Land higher-order Components are very similar to that, and in it, we pass a Component as an argument to other Component, which can also add some functionalities to it.

Let’s first consider the below example without Higher-Order Components. Here we are having a ButtonStyled component, which has two of stylee. If we pass the props “disable”, then the background-color and color are different. You can find the JSFiddle below.

const styles = {
   default : {
       backgroundColor: '#737373',
       color: '#eae8e8',
       padding: '10px'
   }, disable : {
       backgroundColor: '#9c9c9c',
       color: '#c7c6c6',
 }
}
class WithoutHOCdemo extends React.Component {  
 render() {
   return (
     <div>
       <ButtonStyled />
       <ButtonStyled disable />
     </div>
   )
 }
}
const ButtonStyled = (props) => {
let _styles = {...styles.default};
 if(props.disable)
  _styles = {..._styles, ...styles.disable}
return <button style={_styles}>Button Styled</button>
}
ReactDOM.render(<WithoutHOCdemo />, document.querySelector("#app"))

We will now be changing it to use Higher Order Components- styledWrapper, we will move all logic of style changes from ButtonStyled component to a HOC. So, now our ButtonStyled component looks like below. At the last line, we export the styledWrapper wrapping our current component.

import React from ‘react’;
import styledWrapper from ‘./../HOC/styledWrapper';
const ButtonStyled = (props) => {
   return (<button style={props.styles}>ButtonStyled</button>)
}

export default styledWrapper(ButtonStyled);

The Higher Order Component styledWrapper will be like below. In the last part, we take the WrapComponent which is ButtonStyled and return it with translatedProps, which will also get the props passed.

import React from ‘react’;
const styles = {
   default : {
       backgroundColor: '#737373',
       color: '#eae8e8',
       padding: '10px'
   }, disable : {
       backgroundColor: '#9c9c9c',
       color: '#c7c6c6',
   }
}
const translatedProps = (props) => {
   let _styles = {...styles.default}
   if(props.disable){
       _styles = {..._styles, ...styles.disable};  
   }
   const newProps = {...props, styles:_styles }
   return newProps;
}
export default (WrapComponent) => {
    return function wrappedRender(args) {
        return WrapComponent(translatedProps(args));
    }
}

We can pass data between React sibling components using React Router using history.push and match.params.

Let look into the code. We have a Parent component App.js. We have two Child Components HomePage and AboutPage. Everything is inside a Router from React-router Route. We also have a route for /about/{params}. This is where we will pass the data.

import React, { Component } from ‘react’;
class App extends Component {
render() {
   return (
     <Router>
       <div className="App">
       <ul>
         <li>
           <NavLink to="/"  activeStyle={{ color:'green' }}>Home</NavLink>
         </li>
         <li>
           <NavLink to="/about"  activeStyle={{ color:'green' }}>About
  </NavLink>
         </li>
  </ul>
              <Route path="/about/:aboutId" component={AboutPage} />
              <Route path="/about" component={AboutPage} />
              <Route path="/" component={HomePage} />
       </div>
     </Router>
   );
 }
}
export default App;

The HomePage is a simple functional component, which have a button. On clicking the button we are using props.history.push(‘/about/’ + data) , which is used to programatically navigate to /about/data

export default function HomePage(props) {
  const handleClick = (data) => {
   props.history.push('/about/' + data);
  }
return (
   <div>
     <button onClick={() => handleClick('Nabendu')}>To About</button>
   </div>
 )
}

The AboutPage is also a simple functional component, which gets the passed data by props.match.params.aboutId

export default function AboutPage(props) {
 if(!props.match.params.aboutId) {
     return <div>No Data Yet</div>
 }
 return (
   <div>
     {`Data from HomePage ${props.match.params.aboutId}`}
   </div>
 )
}

The Page after clicking on the button in the HomePage looks like below.

The new feature of React Memo are used to solve the problem which we get if the state is not updating in this.setState, but still all components are re-rendered.

To solve this problem we use two solutions. One is to check and compare state in shouldComponentUpdate and if they are same, we don’t re-render components. The other solution is to use PureComponents. See question 51for details. But both of them can’t be used with functional components.

Let’s look at the problem again. Here we have a FunctionalComp, which gets the same state passed every 3 sec.

import React, { Component } from "react";
import FunctionalComp from "./components/functionalComp";
import "./App.css";
class App extends Component {
 state = {
   val: 1
 };
componentDidMount() {
   setInterval(() => {
     this.setState({ val: 1 });
   }, 3000);
 }
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <FunctionalComp val={this.state.val} />
       </header>
     </div>
   );
 }
}
export default App;

The FunctionalComp is below.

import React from “react";
export default (props) => {
 console.log("val =", props.val);
 return <div>{props.val}</div>;
};

So, if we run it we get a value of 1 every 3 seconds printed like below.

We can solve it by wrapping the component in React.memo.

import React from “react";
export default React.memo(props => {
 console.log("val =", props.val);
 return <div>{props.val}</div>;
});

Now the output is just one 1 and after that, as every time the state of it is set to one, so no more renders.

It's no surprise that this one pops up often in React questions.  

Lazy loading is the new feature introduced in React v16.6, which allows for some Components to load later than other components. This way we can load the components which are fast like text earlier and components which loads images a bit later.

• Consider the below code for App.js. In it, there are two Components ContentComponent and myComp.
• One has some paragraph containing lorem ipsum and others have an image to load from unsplash.

Now, we are lazy loading myComp as it has an image to load. Note the special way to import it and also we need to wrap the component in Suspense. Now, Suspense will contain the fallback Component which will be shown while myComp gets loaded.

The other component ContentComponent will load instantly.

//App.js
import React, { Component, lazy, Suspense } from "react";
import "./App.css";
import ContentComponent from './components/ContentComponent';
const MyComp = lazy(() => import("./components/myComp"));
class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">  
         <h1>Lazy Loading Demo</h1>        
          <Suspense fallback={<div>Loading.....</div>}>
            <MyComp />
          </Suspense>
         <ContentComponent />
       </header>
     </div>
   );
 }
}
export default App;
//ContentComponent.js
import React from 'react'
export default function ContentComponent() {
 return (
   <div>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
     <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout...</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
   </div>
 )
}
//myComp.js
import React from "react";
export default () => {
 return <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97" width="960" height="480" alt="coding" />;
};

React is very fast and in localhost, condition to see it, we have to emulate Slow speed. To do so open the console, and go to Network tab. Then click on Online and select Slow 3G.

Now, when you refresh the local running app, you can see Loading…..coming.

As on Redux site “Redux is a predictable state container for JavaScript apps.” Redux can be used separately, but it gained much popularity because it was able to solve the state problem in a React app. 

In React to pass data(or state) between component, we use props to be passed from Parent to Children. If the data needs to be passed to Components 5 level deep then it has to just have to pass through 4 Components, which doesn’t require it. Passing data from Child to Parent is also a problem, and we need to use the Callback function. This gets complicated soon in a large application.

So, to solve this issue we maintain state, which is the main data of the application in a central location. It can be accessed by any Components which ask for it.

Let see the complete flow.

The Container is a file that corresponds directly to a single component. It have two functions called ‘mapDispatchToProps’ and ‘mapStateToProps’.
As in the code below, when the Component loads we have a function call to this.showPopGraphs();
It will go to ‘mapDispatchToProps’, which dispatches it to the action creator.

import { connect } from 'react-redux';
...
...
class MiddleAge extends Component {
   constructor(props) {
       super(props);
       this.state = {
           indPieData : [],
           indPopTotal: '',
           ...
       }
       this.showPopGraphs();
   }
showPopGraphs() {
       this.props.init(currYear);
   }
render() {
       return (
...
...
)
}
const mapStateToProps = ({ dataReducer }) => ({
   indPopData: dataReducer.indPopData,
});
const mapDispatchToProps = dispatch => ({
   init: (currYear) => {
       dispatch(populationAction.getIndPopData(currYear));
   }
});
export default connect(
   mapStateToProps,
   mapDispatchToProps
)(MiddleAge);

The Action Creator: In this file, you will write the functions that dispatch an action. It performs some action, like an API call using axios. When we get the response back from it, we will dispatch an Object with “type” and “data” as { type: GET_INDIA_DATA, indPopData: response.data }
Now this will be heard by only one type of function: the reducer.

export const getIndPopData = (currYear) => dispatch => {
   return axios.get(`http://api.population.io:80/1.0/population/${currYear}/India/`).then(response => {
     dispatch({ type: GET_INDIA_DATA, indPopData: response.data });
   });
};

The Reducer hears: an action, and can now generate a new state based on what the action wants it to do. Note the state never actually changes in Redux, but instead, the reducer generates a new state which is a copy of the old state. 

In the code below we don’t mutate the state but create a new state by Object destructuring.

const initialState = {
   indPopData: [],
};
const dataReducer = (state = initialState, action) => {
   let newState;
   switch (action.type) {
     case types.GET_INDIA_DATA:
       newState = { ...state, indPopData: action.indPopData };
       break;
     default:
       newState = state;
   }
   return newState;
 };

Back to Container: the result is received by “mapStateToProps”. It can be accessed as a prop ie “this.props.indPopData” in this case. Here, we are also data massaging the data in componentWillReceiveProps and storing it in local state variables “indPieData” and “indPopTotal”

After that it is rendered in the component using “this.state.indPopTotal” and “this.state.indPieData”

...
componentWillReceiveProps(nextProps) {
       if (this.props.indPopData !== nextProps.indPopData) {
           this.setState({
               indPieData: nextProps.indPopData.map(item => {return {name: item.age, value:item.total}})),
               indPopTotal: nextProps.indPopData.map(item => {return {name: item.age, value:item.total}});
       }
}
...
   render() {
       return (
           <Fragment>
             {this.state.indPopTotal && <p style={totalText}> India - {this.state.indPopTotal} </p>}
             {this.state.indPieData && <PopPieChart popPieData={this.state.indPieData} />}
           </Fragment>
       )
   }
const mapStateToProps = ({ dataReducer }) => ({
   indPopData: dataReducer.indPopData,
   ...
});

Redux thunk is a middleware which sits between action creator and reducer in the React-Redux flow. It is very useful when we do asynchronous API calls with fetch or axios, which returns a Promise and we then dispatch it to reducer.

Redux thunk mainly works behind the scene. We have used some boiler-plate to use it.

//App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import store from './store';
import { Provider } from 'react-redux';
ReactDOM.render(
   <Provider store={ store }>
       <Routes />
   </Provider>,
 document.getElementById('root')
);
//store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducer';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

In Question 22 for React-Redux flow, in action creator, we call an API endpoint with axios. It is a network request and will take some milliseconds or more depending on the connection.

Now, thunk middleware sort of wait for that call, which is a Promise to completed. Once we get the response, which contains the data then only it dispatches it to the reducer.

export const getIndPopData = (currYear) => dispatch => {
   return axios.get(`http://api.population.io:80/1.0/population/${currYear}/India/`).then(response => {
     dispatch({ type: GET_INDIA_DATA, indPopData: response.data });
   });
};

So, Redux thunk is required in Projects where we do API calls to some endpoint.

As per the official React website “Hooks let you use state and other React features without writing a class.”

When Class based components are small then the state logic is manageable, but as the code grows the state logic becomes unmanageable. In that when we add the lifecycle components like - componentDidMount and componentDidUpdate, the logic becomes more complicated.

With hooks, more of React features can be used without the need for classes in a Function-based component.

Let’s first look into the example with class-based component.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const divStyle = {
 display: 'flex',
 flexDirection: 'column',
 justifyContent: 'center',
 alignItems: 'center',
 border: '5px solid pink'
};



class App extends Component {
 constructor() {
   super();
   this.state = {
     count: 0
   }
   this.setCount = this.setCount.bind(this);
 }
 setCount() {
   this.setState({
     count: this.state.count + 1
   })
 }
 render() {
   return (
     <div style={divStyle}>
       <img src={logo} className="App-logo" alt="logo" />
       <p>You clicked {this.state.count} times</p>
       <button onClick={this.setCount}>Click me</button>
     </div>
   )
 }
}
export default App;

It will output a simple button, which on click will increase the count.

Now let's change the code to use hook.

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
const divStyle = {
 display: 'flex',
 flexDirection: 'column',
 justifyContent: 'center',
 alignItems: 'center',
 border: '5px solid pink'
};
const App = () => {
   // Declare a new state variable, which we'll call "count"
   const [count, setCount] = useState(0)
   return (
     <div style={divStyle}>
       <img src={logo} className="App-logo" alt="logo" />
       <p>You clicked {count} times</p>
       <button onClick={() => setCount(count + 1)}>Click me</button>
     </div>
   )
}
export default App;

The keyword useState is our Hook. This code very much cleaner and understandable than that of the Class based component.

We call it inside a functional component to add a state to it. React will preserve this state for us. useState always returns a pair which has the current state value and a function that will lets us to update the state value.

We then call this function from an event handler onClick. It’s similar to this.setState in a React class.

The argument in useState is used to set the initial state. In our example given above, the initial state is 0, as our counter starts from zero.