In this article, we are going to see how to execute a function after the component is updated and before rendering it to the DOM.This method is called before the rendering of the component and after it is updated. This method is majorly used to compare the previous state or the previous props of the component with the new state or the new received props. The value returned by this method is passed as an argument to the componentDidUpdate method.SyntaxgetSnapshotBeforeUpdate(prevProps, prevState)ParametersprevProps − Previous props passed to componentprevState − Previous state of componentExampleIn this example, we will build a React application which ... Read More

In this article, we are going to see how to execute a function before the component is rendered.This method is called before the rendering or before any updation of the component. This method is majorly used to update the state, before the rendering of the component, which depends upon the props received by the component. This method is called on every rerendering of the component.Syntaxstatic getDerivedStateFromProps(props, state)Parametersprops − Props passed to componentstate − Previous state of componentExampleIn this example, we will build a React application which will fetch the list of users and on clicking the 'fetch user' button, the ... Read More

In this article, we are going to see how to execute a function if some error occurs in the component.This method is called when a component encounters some error during the React Component Lifecycle. This method allows us to handle the error boundaries of the application. To avoid performance issues, don’t set up any side-effects in this method.Syntaxstatic getDerivedStateFromError(error)It accepts the error as a parameter that was thrown as a component.ExampleIn this example, we will build a React application that displays the contained Comp1 component if no error occurs; otherwise it displays some text. But here, in Comp1 component, error ... Read More

In this article, we are going to see how to execute a function by forcibly re-rendering a component.The component in the React lifecycle only re-renders if the props passed to it or its state changes but to forcibly render the component, use the build it forceUpdate method. This method overrides the shouldComponentUpdate method defined in the component but will consider the shouldComponentUpdate method defined in the children component.Syntaxcomponent.forceUpdate(callback)ExampleIn this example, we will build a React application that gets forcibly re-rendered on a button click.App.jsximport React from 'react'; class App extends React.Component {    update = () => {   ... Read More

While building a React application, the most-used Chrome extension for debugging the React application or to solve the error is React Developer Tools which is a free-to-use and opensource chrome extension.This extension is used to navigate through the nested component tree of the React Components. It takes a lookup into the stored state and the props values and also records the performance information.Note: This extension also tells whether a page is using the technology stack of ReactJS or not.How to installGo to Chrome web store and install React Developer Tools.When you tap on this extension, it will show if the ... Read More

In this article, we are going to see how to create a reference to any DOM element in the functional component.This method is used to access any DOM element in a component and it returns a mutable ref object which will be persisted as long as the component is placed in the DOM. If we pass a ref object to any DOM element, then the. current property to the corresponding DOM node elements will be added whenever the node changes.SyntaxReact.createRef()ExampleIn this example, we will build a React application that will pass the ref object to two input fields and when ... Read More

In this article, we are going to see how to execute a function before the component is updated in the DOM tree.This method is used during the updating phase of the React lifecycle. This function is generally called before the component is updated or when the state or props passed to the component changes. Don’t call setState() method in this function. This method will not be invoked if shouldComponentUpdate() methods return false.Note: This method is now deprecated.SyntaxUNSAFE_componentWillUpdate(nextProps, nextState)ExampleIn this example, we will build a color changing React application which calls the componentWillUpdate method when the component is updated in the DOM ... Read More

In this article, we are going to see how to execute a function when the component is deleted from the DOM tree.This method is called during the unmounting phase of the React Lifecycle, i.e., before the component is destroyed or unmounted from the DOM tree. This method is majorly used to cancel all the subscriptions that were previously created in the componentWillMount method.Never call this.setState() inside the componentWillUnmount method as this component is never going to be re-rendered again.SyntaxcomponentWillUnmount()ExampleIn this example, we will build a React application which displays the list of all users. On clicking the 'Delete User' button, ... Read More

In this article, we are going to see how to execute a function if the props passed to the component is updated in the DOM tree.This method is used during the updating phase of the React lifecycle. This function is generally called if the props passed to the component change. It is used to update the state in response with the new received props. setState() method doesn’t generally call this method again.Note: This method is now deprecated.SyntaxUNSAFE_componentWillReceiveProps(nextProps)ExampleIn this example, we will build a color-changing React application which will call the componentWillReceiveProps method when the props of the component are updated.Our first ... Read More

In this article, we are going to see how to execute a function before the component is loaded in the DOM tree.This method is used during the mounting phase of the React lifecycle. This function is generally called before the component gets loaded in the DOM tree. This method is called before the render() method is called, so it can be used to initialize the state but the constructor is preferred.This method is generally used in server-side rendering. Don’t call subscriptions or side-effects in this method; use componentDidMount instead.Note: This method is now deprecated.SyntaxUNSAFE_componentWillMount()ExampleIn this example, we will build a ... Read More