Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by Rahul Bansal
Page 2 of 3
ReactJS – shouldComponentUpdate() method
In this article, we are going to see how to increase the performance of React application by rerendering the component only when the props passed to it changes or on when certain conditions are met.This method is majorly used to take an exit from the complex React lifecycle, but using it extensively may lead to bugs in the application.SyntaxshouldComponentUpdate(nextProps, nextState)By default, the return value of this method is true; but if it returns false, then the render(), componentWillUpdate() and componentDidUpdate() methods are not called.Example 1In this example, we will build a React application with components only getting re-rendered if the ...
Read MoreReactJS – getDerivedStateFromProps() Method
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 MoreReactJS – forceUpdate() Method
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 MoreReactJS Developer Tools
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 MoreReactJS – componentWillUnmount() Method
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 MoreReactJS – componentWillReceiveProps() Method
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 MoreReactJS – componentDidMount Method
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 MoreReactJS componentDidCatch method
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 MoreReactJS – bind() method
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 MoreReactJS – Axios Interceptors
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