React Lifecycle methods - I Mounting - render()

README.md

React | Lifecycle methods

I - Mounting or First Render

These methods are called in the following order when an instance of a component is created and inserted into the DOM:

1. constructor()
2. render() ⬅
3. componentDidMount()

render()

• The render() lifecycle method is the next in line lifecycle method called right after the constructor.
• render() is the only required method in a class component.
• render() method should be pure, meaning that it does not modify component's state (don't use the setState inside).
• This method structures and prepares the JSX, and returns React elements.
• After the render is done the React component “mounts” onto the DOM.

Clock.js

...

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      year: props.year,
    };
    console.log('IN CONSTRUCTOR');
  }


  /* custom methods and lifecycle methods go after the `constructor` */
  
  
  render() {
    console.log('IN RENDER');
    
    return (
      <div>
        <h1>Clock</h1>

        <h2>Year</h2>
        <p>{this.state.year}</p>
      </div>
    );
  }   //    ⮕     After the `render` is done  the React component “mounts” to the DOM.
}