Skip to main content

Posts

Showing posts with the label Updating

React Updating Render Method | Components Lifecycle

The Render Method - The render() method is the only required method in a class component. The render() method is called when a component gets updated and re-render the HTML to the DOM including the new changes. Explore to Understand   -  React Lifecycle Components Note : The render() will not be invoked if shouldComponentUpdate() returns false. As an Example , class   Header   extends   React . Component  {      constructor ( props ) {        super ( props );        this . state  = { color:   "red" };     }      changeColor  = ()  =>  {        this . setState ({ color:   "blue" });     }      render () {        return  (    ...

React Lifecycle Components | Mounting, Updating, Unmounting

In React, each component has a life-cycle which manipulate during its three main phases. The following three phases are: 1.       Mounting 2.       Updating 3.       Unmounting React does so by “ Mounting ” (adding nodes to the DOM), “ Unmounting ” (removing them from the DOM), and “ Updating ” (making changes to nodes already in the DOM). Mounting - Lifecycle Phase 1 Mounting is used for adding nodes (elements) to the DOM. The React has four built-in methods that gets called, in this order, when mounting a component - 1.       constructor() 2.       getDerivedStateFromProps() 3.       render() 4.       componentDidMount() Note – 1)       The render() method is required and It always be called and the others methods are optional (you will call...