Explore topic-wise InterviewSolutions in .

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:

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

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.

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

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

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-

Let consider the below example for PropType.

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 -

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

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

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

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

We will get the below error in console.

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.

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.

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.

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

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.

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

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.

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.

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.

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)

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.

Props or properties are REACT way to pass data from parent component to child component. Props can be passed to both Function based component or CLASS-based components.

Consider this React CODE for About Page.

Now the code for Header.

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.

Now the code for Header.

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.

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.

JSX is used in React to write code instead of regular JavaScript. It is similar to JavaScript but actually an extension to it. JSX Allows us to include ‘HTML’ in the same file along with ‘JavaScript’ (HTML+JS=JSX).

JSX LOOKS like regular HTML and we have used it in Question 1.

In the above example inside the return statement, we are using JSX. Notice, the <div> is used to wrap the whole HTML code. It is required or else compiler will throw an error.

JavaScript expressions also can be used inside of JSX. We use it by wrapping them inside a set of curly brackets {}, as in below example.

Gives output - 2

We cannot use if-else statement inside JSX, so we use ternary expressions if we need to check condition. In the below example, we TOOK the App.js provided when we create a react app using create-react-app. Here we MODIFIED the code and used a ternary EXPRESSION to check if i is 1, and then display an image or else display the link.

Gives output -

Both Angular and React are popular JavaScript Framework/Library used worldwide to create complex web-apps.

Angular is different then AngularJS, which was released in 2009 and uses JavaScript. Angular released in 2016 by Google, was a complete rewrite of AngularJS and is not backward compatible. It uses TypeScript instead of JavaScript as the programming language. TypeScript is a statically TYPED language, which is CONSIDERED as the superset of JavaScript. TypeScript provides developers with Object-oriented background a smooth transition to JavaScript.

React is a JavaScript library released by Facebook in 2013. It was initially developed at Facebook to optimise the ease of development of Component and to speed up Facebook.

Let’s now look at the differences between Angular and React -

Angular is a complete framework, whereas React is a library. React is very lightweight and we generally use other third-party libraries to enhance its capabilities when REQUIRED. On the other hand, you get everything inside the Angular ecosystem only, but sometimes its an overkill.

Angular uses two-way data-binding, whereas React uses one-way data-binding. In React the data flows from parent component to child component only. Sometimes this complicates thing and to solve it we use state management packages like Redux and Flux with it.

Angular comes with complete MVC(Model-View-Controller), whereas React is just the View layer in MVC. In Angular, we write our TypeScript and HTML in different FILES and it separates the logic. Whereas in React, we use a hybrid language called JSX, which is basically writing JavaScript inside HTML code.

React is faster than Angular because it updates the Virtual DOM, whereas Angular updates directly the Real DOM. React only updates the part of DOM which gets updated by the code and behind the scene updates the Real DOM, when its efficient, Angular directly updates Real DOM, like a typical vanilla HTML, JS application. This has a huge impact in complex web-applications which have many complex features and it gives the advantage to React.

React is much easier to learn for a beginner as it’s a library with some basic concept. In comparison, Angular learning curve is more as you have to learn a complete Framework and have many unique concepts. But once you need to implement things like Redux, react-router to React, the complexity grows.

MVC or Model-VIEW-Controller is a software design pattern mainly used in Web development for creating complex web-apps.  This architecture comes from the traditional flow of web-application:

• View: Displays VISUALISATION of data to the user. It is mainly the UI which the user interacts with.
• Controller: It processes server-side logic and is a middleware between View and Model.
• Model: It mainly processes data from or to the DATABASE. It is only connected to the database.

Now, React is considered as the View LAYER in the MVC model, as it is mainly used to create the UI.
To use Controller and Model logic in React, we use third party libraries like flux and Redux with it.

There are mainly TWO ways to start a project in React - First is to setup React with Webpack and Babel from Scratch. The second way is to use the user-friendly way provide by Facebook ie using create-react-app.

The create-react-app also under the hood uses babel and webpack to compile your React code to PLAIN HTML, CSS, and JavaScript. So, we can set them manually in React. But it is a lengthy and complicated process.

On the other hand, create-react-app is a simple way to start with React and provided by Facebook. The way is a bit different for npm version 5.2 and up then for 5.1 and down.

We will look into the way to create a react app using rpm version 5.2+. So, first, go to your terminal to check your npm version.

As I have npm version 6.5, so will use npx create-react-app my-app to create the react app.
It will take some time to install all the dependencies from the internet. It will take 2-4 minutes.

It will show US the above message once the SYSTEM is ready. Next we cd into the directory and run our local development environment by running npm start

If it compiled successfully, we will get the below in our terminal.

As instructed, we need to open any web browser and go to http://localhost:3000/ to see our React app.

If you use npm 5.1 or EARLIER, you can't use npx. Instead, install create-react-app globally:

ReactJS or simply React is a frontend library created by Facebook. It is used in their products like Facebook, WHATSAPP, and Instagram. It was initially maintained by Facebook but later it was MADE open source and now have an active developer community. Popular websites like Netflix, Airbnb, Yahoo! Mail, KhanAcademy, DROPBOX and much more use React to build their UI.

React allow us to create reusable UI components. Suppose you have a website, which has the same header and footer in all pages. If you create it using normal HTML and JS, then you have to use the same HTML code for header and footer in all pages.  But in React you can have the Header and Footer as a separate component and import it into different Pages.

Consider this React code for About Us page.

Now, Consider this React code for Services page.

Beside this React is also very fast which reduces the loading TIME of even complex web-apps. React achieves this speed because it doesn’t update the Real DOM directly but it updates the Virtual DOM.

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.

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

Now let's change the code to use hook.

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.

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.

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.

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

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.

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.

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.

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”

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.

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.

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.

The FunctionalComp is below.

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.

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.

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.

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

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

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

In vanilla JavaScript, we have the concept of Higher Order Functions, in which we pass a function to other 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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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

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 bee called.

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

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

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

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

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.

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.

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

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

• PARENT to CHILD – props, CONTEXT
• Child to parent – states, callbacks
• Siblings – callback, props, context

• How to return multiple components WITHOUT wrapping using DIV, HOC or Fragment
• Fragments help you return a LIST of items without adding extra nodes to the DOM.
• Return as an Array. This is introduced since React 16

React router is a commonly USED module for routing in React applications.

React router COMPONENT listens to history changes in React applications. It has a URL mapping to components in it. It renders the corresponding component when a MATCH is found.

Link component is used to NAVIGATE around in your application.

Code sample below

import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function APP() { const check = 0; // 0, "", null, undefined return ( <div className="App"> { check && <span>Hello</span> } </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

This will render 0 to the browser.

• When using CONDITIONAL rendering using LOGICAL && operator 0 is evaluated as number and will be rendered by the browser
• How we can avoid rendering 0 in the above case.

We need to make the 0 a Boolean by adding !. Code is given below

import React from "react"; import REACTDOM from "react-dom"; import "./styles.css"; function Button(props) { return ( <button TYPE="submit">{props.LABEL}</button> ); } CONST rootElement = document.getElementById("root"); ReactDOM.render(<Button label="Save" />, rootElement);