The update lifecycle can be triggered by two events −Update of props by parent componentChange in local stateUpdate of props by parent componentcomponentWillReceiveProps(nextProps) −This is the first method which gets called on prop change. It contains one argument nextProps means the newly changed props.Here, we can synchronize local state with ... Read More

ComponentWillUnmount is the only method that executes in unmount phase.Component enters into this phase when there is no matching in element tree for this component.Just before the component gets removed from actual DOM, this method gets called.Along with removal of this component from DOM tree, all children of this component ... Read More

We have a lifecycle method called shouldComponentUpdate which by default returns true (Boolean) value.The purpose of the shouldComponentUpdate is we can custom implement the default behavior and decide when react should update or re-render the component.Generally we use state or props value to decide the update cycle. React has now ... Read More

We have an app.jsx componentimport React, { Component } from 'react'; import { Link, Route, Switch } from 'react-router-dom'; import Category from './Category'; class App extends Component {    render() {       return (                           ... Read More

We have an index.js file as −import React from 'react' import ReactDOM from 'react-dom' import './index.css' import { Route, Link, BrowserRouter } from 'react-router-dom' import App from './App' import AboutUs from './ AboutUs’; import ContactUs from './ContactUs'; const routs = (    < BrowserRouter >         ... Read More

We have shouldComponentUpdate in class based component as lifecycle method. This method can be used to achieve the performance optimization by comparing props (previous and next) and executing render conditionally .We have React.PureComponent as well which can do shallow comparison of state and props. But in functional component we don’t ... Read More

There are multiple ways to add bootstrap in react project.Using bootstrap CDNInstalling bootstrap dependencyUsing react bootstrap packagesUsing bootstrap CDNThis is the simplest way to add bootstrap. Like other CDN, we can add bootstrap CDN in index.html of the react project.Below is one of the react CDN urlIf we need the ... Read More

The aria-* attributes on html elements are also supported in React.js as well. The other attributes are generally written in camel-case but these aria-* are written in hyphen-cased.Sometimes we break the semantics of the html if we use parent div in React.jsExamplerender(){    return(           ... Read More

React community has provided a direction on how to think in React way and build big , fast and scalable applications. React has reached multiple platforms and widely used a popular JavaScript UI interface library.Step 1 − Creating a simple mock serviceIf we need to make a server call and ... Read More

Composition and inheritance are the approaches to use multiple components together in React.js . This helps in code reuse. React recommend using composition instead of inheritance as much as possible and inheritance should be used in very specific cases only.Example to understand it −Let’s say we have a component to ... Read More