Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
ExamplesApproach to solve this problemStep 1 − Define a method that accepts the head of a linked list.Step 2 − If head == nil, return the head.Step 3 − Initialize the index as i := 0.Step 4 − Iterate the given linked list from its head.Step 5 − If the index i matches with the given index (to be updated), then update that node.Step 6 − Else, return head.Example Live Demopackage main import "fmt" type Node struct { value int next *Node } func NewNode(value int, next *Node) *Node{ var n Node n.value = value n.next ... 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
In this article, we are going to see how to execute a function when the component is updated in the DOM tree.This method is called only when the component gets updated or when the props passed to it change. It isn’t called for the initial render of the component. This method is majorly used to perform some operations which are needed to be executed only if the DOM is updated.To avoid any performance issues, it is advised to use this method with conditional loop like −componentDidUpdate(prevProps, prevState) { if (prevState.text !== this.state.text) { // Write logic ... Read More
In this article, we are going to see how to execute a function when the component is loaded in the DOM tree.This method is majorly used during the mounting phase of the React lifecycle to handle all the network requests or to set up all the major subscriptions of the application.You can always set up network requests or subscriptions in the componentDidMount method but to avoid any performance issues, these requests are needed to be unsubscribed in the componentWillUnmount method which is called during the unmounting phase of the React lifecycle.SyntaxcomponentDidMount()ExampleIn this example, we will build a color-changing React application ... Read More
ExampleApproach to solve this problemStep 1 − Define a method that accepts the head of a linked list.Step 2 − If head == nil, return the head.Step 3 − Initialize the index as i := 0.Step 4 − Iterate the given linked list from its head.Step 5 − If index i matches with the given index (to be updated), then update that node.Step 6 − Else, return head.Example Live Demopackage main import "fmt" type Node struct { value int next *Node } func NewNode(value int, next *Node) *Node{ var n Node n.value = value n.next = ... Read More
ExamplesApproach to solve this problemStep 1 − Define a method that accepts the head of a linked list.Step 2 − If head == nil, return the head.Step 3 − Initialize the index as i := 0.Step 4 − Iterate the given linked list from its head.Step 5 − If index i matches with given index (to be updated), then update that node.Step 6 − Else, return the head.Example Live Demopackage main import "fmt" type Node struct { value int next *Node } func NewNode(value int, next *Node) *Node{ var n Node n.value = value n.next = ... Read More
In this article, we are going to see how to execute a function in the commit phase if some error occurs in the Component.This method is called when a component or any children component encounters some error during the React Component Lifecycle. This method allows us to handle the error boundaries of the application.Unlike the getDerivedStateFromError method, this method is called during the commit phase, so side-effects are also allowed in this method.SyntaxcomponentDidCatch(err, data)Parameterserr - Error thrown by the component.data - Stores information about the component which has thrown the error.ExampleIn this example, we will build a React application that displays the ... Read More
In this article, we are going to see how to pass arguments to a function in a React applicationReact has a predefined bind() method which we can use to pass the arguments to a function in the class based components.Syntaxthis.func.bind(this, [args...])It accepts two parameters, this keyword and the arguments. 'this' keyword is used to pass the reference to that function while the second parameter is passed as arguments to the function.ExampleIn this example, we will build a React application that passes the arguments to a function when a button is clicked.App.jsximport React from 'react'; class App extends React.Component { ... Read More
In this article, we are going to learn how to intercept every request or response that is being sent by Axios Interceptors in a React application.Axios interceptors are the default configurations that are added automatically to every request or response that a user receives. It is useful to check response status code for every response that is being received.ExampleIn this example, we will build a React application that automatically checks and logs the status code that is sent by the server while sending a POST request from our React application.We have to set all the configuration in the most global ... Read More