React Class Component - Rendering (Mounting/Unmounting)

React Mapping Html Javascript

About

React - Rendering (Lifecycle) for a class component

For a function component, see React Function Component - Lifecycle

Method

In a class component, mounting and unmounting are methods:

  • componentDidMount: Runs after the component output has been rendered to the DOM
  • componentWillUnmount
  • componentDidUpdate

In a function component, you would use useEffect for all three state

Example

  • A component with state using the lifecycle functions componentWillUnmount and componentDidMount.
class LifeCycle extends React.Component {

  //  Since Clock needs to display the current time, the constructor initializes this.state
  constructor(props) {
    super(props);
    this.state = {count:0}
    this.handleClick = this.handleClick.bind(this);
  }

  // When the render output is inserted in the DOM, React calls the componentDidMount() lifecycle hook. 
  componentDidMount() {
    console.log("Mounted - The Lifecyle was added (mounted)");
  }
  
  //  Called if the component is ever removed from the DOM
  componentWillUnmount() {
    console.log("UnMounted - The Lifecyle component was removed (unmounted)");
  }
  
  //  Called if the component is updated from the DOM
  componentDidUpdate() {
    console.log("Updated - The Lifecyle component was updated "+this.state.count+" times");
  }

  handleClick(){
     this.setState({count:this.state.count+1});
  }
  
  // What should be displayed on the screen. 
  render() {
    return (
      <div>
        <p>Hello from the Lifecyle component</p>
        <button type="button" onClick={this.handleClick}>Update the component</button>
      </div>
    );
  }
}
class App extends React.Component {

  //  Since Clock needs to display the current time, the constructor initializes this.state
  constructor(props) {
    super(props);
    this.state = {isToggleOn: false};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
   this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  // What should be displayed on the screen. 
  render() {
    let cycle = null;
    if (this.state.isToggleOn) {
      cycle = <LifeCycle/>;
    } 
    return (
      <div>
        <h1>Mount/Unmount/Update demo</h1>
        <button type="button" onClick={this.handleClick}>{this.state.isToggleOn ? 'Unmount the lifecycle component' : 'Mount the lifecycle component'}</button>
        {cycle}
      </div>
    );
  }
}
  • The classic Render to start the rendering. When <Lifecycle /> is passed to ReactDOM.render(), React calls the constructor of the Clock component, then calls the Clock component's render() method.
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>





Recommended Pages
React Mapping Html Javascript
Class Component

A component in a Class representation Feature available only to classes: Local state Lifecycle function.
React Render Element Splittsing
React - (Component) Updating

updating is a lifecycle render step that updates a component. An update is triggered by a change of state. See See React DOM compares the new element and its children to the previous one,...
React Mapping Html Javascript
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React Mapping Html Javascript
React - Rendering (Lifecycle)

rendering in React (ie update of the DOM) To make the UI interactive, you need to be able to trigger changes to your underlying data model. The root element is the passed to the ReactDom.render function...
React Mapping Html Javascript
React Class Component - Local State

state management in class component In React, mutable state is typically kept in the state property of components, and only updated with setState(). Do Not Modify State Directly. Use this.setState()....
React Hook Side Effect Doc Title
React Function Component - (Side) Effect (useEffect Hook)

Effect Hook is a hook that lets you perform side effects in functional components, and is similar to lifecycle methods in classes. An effect is also known as a side-effect Example of effect: Data...
React Mapping Html Javascript
React Function Component - Hooks

hooks are functions (React >= 16.8) that can be used only in a functional component A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. Hooks are functions...
React Mapping Html Javascript
React Function Component - Lifecycle

lifecycle rendering in functional component are managed through effect A mount run the body of the effect function (equivalent to a mount) A unmount (called also cleanup) runs the function returned...
React Mapping Html Javascript
React Function Component - State (useState Hook)

This page is state in a React Functional Component. In this context, the state is managed by the useState hook. With the React.useState hook With the createElement The component The rendering...



Share this page:
Follow us:
Task Runner