{"id":5080,"date":"2025-03-05T17:01:16","date_gmt":"2025-03-05T11:31:16","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=5080"},"modified":"2025-03-05T17:01:17","modified_gmt":"2025-03-05T11:31:17","slug":"from-mounting-to-unmounting-react-class-component-lifecycle","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/from-mounting-to-unmounting-react-class-component-lifecycle\/","title":{"rendered":"From Mounting to Unmounting: React Class Component Lifecycle"},"content":{"rendered":"

In React, class-based components play a crucial role in managing the rendering, updating, and unmounting of UI components. functional components with hooks are now the preferred way of writing React components.<\/span><\/p>\n

class-based components in React were the traditional way to define components prior to the introduction of function components and Hooks in React 16.8.Although function components with Hooks are now preferred for their simplicity and flexibility, class components are still widely used in legacy codebases. understanding class components is essential for working with older react project.<\/span><\/p>\n

The lifecycle of a class-based component in React consists of different phases during which specific methods are called to handle various operations like initialization, rendering, updating, and unmounting.<\/span><\/p>\n

React speed comes from its two main phases: the render and commit phases. During the render phase, the constructor is invoked first, followed by the render( ) method. In the commit phase, react updates the DOM and then triggers the componenDidMount( ) method.<\/span><\/p>\n

<\/p>\n

Phases of a Class-Based Component Lifecycle<\/span><\/h1>\n

1.Mounting (Creating a component)<\/span><\/h2>\n

2.Updating (When props or state change)<\/span><\/h2>\n

3. Unmounting (Cleaning up the component)<\/span><\/h2>\n

<\/p>\n

<\/span><\/p>\n

<\/p>\n

1. Mounting Phase (Component Creation) :<\/strong><\/p>\n

The mounting phase occurs when the component is being created and inserted into the DOM. <\/span><\/p>\n

<\/p>\n

<\/p>\n

The constructor( ) lifeCycle method<\/strong><\/p>\n

The constructor is the first method called when the component is created. It\u2019s primarily used for: Initializing the component\u2019s state. and bind event handlers, the constructor is the first method invoked when an instance of the component is created.<\/span><\/p>\n

The constructor function is used to:<\/strong><\/p>\n

    \n
  • Initialize local state or any other third-party libraries.<\/span><\/li>\n
  • Bonding event handlers the instance<\/span><\/li>\n<\/ul>\n

    some points to keep in mind about constructor:<\/strong><\/p>\n

      \n
    • <\/strong>Every component need not include a constructor.<\/span><\/li>\n
    • To set property or use “this” we need to call super( ) within constructor.<\/span><\/li>\n<\/ul>\n

      Example<\/strong><\/p>\n

      class mycomponent extends React.Component {\n constructor(props){\nsuper(props):\/\/ALWAYS CALLS super(props) when using class based components to access the super class methods and \nthis.state={\ncount:1\n};\n}\n}\n<\/pre>\n
      The Render( ) lifecycle method<\/strong><\/p>\n
      The render method is responsible to rendering components to DOM based on its current props and state its is called every time when components to be re- render, the Render() method must return the piece of JSX representing the components structure ,This is the method where the components is displayed in browser.<\/span><\/p>\n
      Example<\/strong><\/p>\n
      render(){\nreturn(\n<div className=\"use-cart\">\ufeff\n <h1>NAME={this.state.info.name}<\/h1>\n<h2>LOCATION={this.state.info.location}<\/h2>\n<h2>CONTACT={this.state.info.email<\/h2>\n<img className=\"pic\" src={this.state.info.avatar_URL}\/>\n<\/div>\n);\n}\n<\/pre>\n
      The ComponentDidMount( ) lifecycle method<\/strong><\/p>\n
        \n
      • ComponentDidMount( ) method is called immediately after the component is inserted into the DOM , ComponentDidMout( ) is mainly used to set up any necessary event listeners or timers,perform any necessary API calls or data fetching and DOM manipulations ,<\/span><\/li>\n
      • Fetching Data from an API: componentDidMount() is used to make an HTTP request or API call to fetch data. Since it\u2019s called after the initial render, it ensures that the component has been inserted into the DOM before attempting to fetch data.<\/span><\/li>\n<\/ul>\n
        Example:<\/strong><\/p>\n
        import React from \"react\";\nclass UserClass extends React.Component {  \n   constructor(props) {        \nsuper(props); \n   this.state= {     \n info:{    \n  name: \"FIROJ\", \n  location:\"warangle\", \n  avatar_url:\"httpvjkjhvc\" \n   }}   \n async componentDidMount()\n{\nconst data= await fetch(\"https:\/\/api.github.com\/users\/RIYAZ12697\");\nconst json= await data.json(); \nconsole.log(json);\n this.setState({  info:json });\n}\n render() { \n  return( \n<div className=\"user-cart\"> \n <h2> NAME: {this.state.info.name}<\/h2>  \n <h2> LOCATION: {this.state.info.location}<\/h2>   \n<h2> CONTACT: sshaikriyaz252@gmail.com<\/h2>  \n <img className=\"pic\" src={this.state.info.avatar_url}\/>     \n<\/div>    );  }\n}\nexport default UserClass;\n\n<\/pre>\n
        Updating phase(When props or state change)<\/strong><\/p>\n
          \n
        • This phase occurs whenever there is change to the component’s props or state during this phase the React re-renders the component to reflect the new state or props.<\/span><\/li>\n<\/ul>\n
          Triggers for the updating phase:<\/strong><\/h2>\n
            \n
          • State Changes<\/strong>: When the component’s state is updated using this.setState.<\/span><\/li>\n
          • Props Changes<\/strong>: When the parent component passes new props to the child component.<\/span><\/li>\n<\/ul>\n
            <\/p>\n
            <\/p>\n
            <\/p>\n
            The shouldComponentUpdate() lifecycle method<\/strong><\/p>\n
              \n
            • The shouldComponentUpdate() method is called before a component is updated.<\/span><\/li>\n
            • It takes two arguments: nextProps and nextState. This method returns a boolean value that determines whether the component should update or not. If this method returns true, the component will update, and if it returns false, the component will not update.The shouldComponentUpdate method provides a way to optimize performance by skipping unnecessary renders.<\/span><\/li>\n<\/ul>\n
              <\/p>\n
              Example<\/strong>:<\/span><\/p>\n
              shouldComponentUpdate(nextProps, nextState)<\/p>\n
              {<\/p>\n
              return nextProps.value !== this.props.value;<\/p>\n
              The Render( ) lifecycle method<\/strong><\/p>\n
                \n
              • The render phase focuses solely on producing the new virtual DOM representation based on updated state or props. The render phase is distinct from the actual DOM updates (known as the commit phase<\/span><\/li>\n
              • This is the method that is responsible for inserting a Component into the DOM. This is invoked every time a Component\u2019s state\/props is updated.<\/span><\/li>\n
              • React compares the newly generated virtual DOM tree with the previous one (diffing algorithm).Based on the comparison, React identifies the minimal set of changes needed to update the actual DOM.<\/span><\/li>\n<\/ul>\n
                 Example:<\/span><\/p>\n
                import React { Component } from “react”;<\/p>\n
                class Counter extends Component \n{ \nconstructor(props) \n{\n super(props);\n this.state = { \ncount: 0,\n }; } \nincrement = () => \n{ \nthis.setState({ count: this.state.count + 1 }); \n}; \nshouldComponentUpdate(nextProps, nextState) \n{ \n return nextState.count % 2 === 0;\n }\n render() { \nconsole.log(\"Render method called!\"); \nreturn ( \n<div> \n<h1>Count: {this.state.count}<\/h1> \n<button onClick={this.increment}>Increment<\/button> <\/div> );\n }\n }\nexport default Counter\n<\/pre>\n
                The componentDidUpdate() lifecycle method<\/strong><\/p>\n
                  \n
                • The componentDidUpdate() method is a lifecycle method in React that is called after a component has been updated and re-rendered. It is useful for performing side effects or additional operations when the component’s props or state have changed.<\/span><\/li>\n<\/ul>\n
                   It allows you to perform side effects, such as<\/strong><\/p>\n
                    \n
                  • Logging.<\/span><\/li>\n
                  • Fetching data based on new props or state.<\/span><\/li>\n
                  • Interacting with the DOM.<\/span><\/li>\n<\/ul>\n
                    Key Arguments of componentDidUpdate<\/strong><\/p>\n
                    When componentDidUpdate is executed, it provides two arguments:<\/span><\/p>\n
                      \n
                    • prevProps<\/strong>: The props the component had before the update.<\/span><\/li>\n
                    • prevState<\/strong>: The state the component had before the update.<\/span><\/li>\n<\/ul>\n
                      This allows you to compare the previous values with the current ones to decide if some action is necessary.<\/span><\/p>\n
                      Example:<\/span><\/p>\n
                      import React { Component } from \"react\";\n class Counter extends Component { constructor(props) {\n super(props);\n this.state = { \ncount: 0, \n }; } \n increment = () => {\n this.setState({ count: this.state.count + 1 }); \n}; \ncomponentDidUpdate(prevProps, prevState) \n{ \n if (prevState.count !== this.state.count) { \nconsole.log(`Count changed from ${prevState.count} to ${this.state.count}`); \n} } \nrender() {\n return ( \n<div>\n<h1>Count: {this.state.count} <\/h1>\n<button onclick={this.increment}Increment <\/button>\n<\/div>\n);\n } \n} \nexport default Counter;\n<\/pre>\n
                      Unmounting Phase<\/strong><\/p>\n
                        \n
                      • The unmounting phase refers to the lifecycle stage when a component is being removed from the DOM (Document Object Model) and is no longer rendered or accessible.<\/span><\/li>\n
                      • During this phase, React performs a series of cleanup operations to ensure that the component and its associated resources are properly disposed of.<\/span><\/li>\n
                      • The unmounting phase is the last stage in the lifecycle of a React component and occurs when the component is being removed from the DOM tree.<\/span><\/li>\n<\/ul>\n
                        <\/p>\n
                        The componentWillUnmount() lifecycle method<\/strong><\/p>\n
                        This method is called just before the component is removed from the DOM. It allows you to perform any necessary cleanup, such as canceling timers, removing event listeners, or clearing any data structures that were set up during the mounting phase.<\/span><\/p>\n
                        After componentWillUnmount() is called, the component is removed from the DOM and all of its state and props are destroyed.<\/span><\/p>\n
                        It’s important to note that once a component is unmounted, it cannot be mounted again. If you need to render the component again, you will need to create a new instance of it.<\/span><\/p>\n
                        It allows you to clean up resources such as<\/strong>:<\/span><\/p>\n
                          \n
                        • Canceling network requests.<\/span><\/li>\n
                        • Clearing timers or intervals.<\/span><\/li>\n
                        • Removing event listeners.<\/span><\/li>\n
                        • Cleaning up subscriptions <\/span><\/li>\n<\/ul>\n
                          Example:<\/span><\/p>\n
                          import React from \"react\";\nclass UserClass extends React.Component{  \n  constructor(props){     \n super(props); \n   this.state={   \n   info:{    \n     name: \"fffff\",  \n     location:\"warangle\",         \n   avatar_url:\"httpvjkjhvc\" \n       }}   \n   } \n async componentDidMount(){\nconst data= await fetch(\"https:\/\/api.github.com\/users\/RIYAZ12697\");\nconst json= await data.json(); \nconsole.log(json); \n this.setState({ \n  info:json \n});  \nthis.timer =setInterval(()=>\n{  console.log(\"nmaste react\"); \n},1000);\n}\ncomponentDidUpdate(){  \nconsole.log(\"called in update phase\");\n}\ncomponentWillUnmount()\n{  \nclearInterval(this.timer)\n}   \n render() {    \n  return(  <div className=\"user-cart\">      \n   <h2> NAME: {this.state.info.name}<\/h2>  \n  <h2> LOCATION: {this.state.info.location}<\/h2>   \n <h2> CONTACT: sshaikriyaz@gmail.com<\/h2> \n  <img className=\"pic\" src={this.state.info.avatar_url}\/>    \n  <\/div>   \n    );\n    }\n    }\nexport default UserClass;\n\n<\/pre>\n
                          Conclusion :<\/strong><\/p>\n
                          The lifecycle of class-based components in React provides a structured way to manage and respond to different stages of a component’s existence. From initial rendering to updating and finally unmounting, these lifecycle methods give developers fine-grained control over their components. The lifecycle methods of class-based components remain essential for handling tasks like fetching data, updating the UI based on state or props, and cleaning up before unmounting. Although function components with Hooks are the modern approach, understanding class component lifecycle methods is still crucial for working with older codebases and for a deeper understanding of how React operates.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
                          In React, class-based components play a crucial role in managing the rendering, updating, and unmounting of UI components. functional components with hooks are now the preferred way of writing React components. class-based components in React were the traditional way to define components prior to the introduction of function components and Hooks in React 16.8.Although function<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[231,263,356,355,170],"tags":[224,357,223,358],"class_list":{"0":"post-5080","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-article","7":"category-javascript-frameworks","8":"category-new-react","9":"category-react19","10":"category-reactjs","11":"tag-react","12":"tag-react19","13":"tag-reactjs","14":"tag-reactjs19"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5080"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5080\/revisions"}],"predecessor-version":[{"id":5085,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5080\/revisions\/5085"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}