Class based Components and state management (setState) & Component Lifecycle

Class based Components and state management (setState) & Component Lifecycle

2 Likes

Write life cycle methods from class based components ?

Life Cycle Phases are:-

  1. Constructor
  2. Render
  3. ComponentDidMount
  4. ComponentDidUpdate
  5. ShouldComponentUpdate
  6. ComponentWillUnmount
1 Like

-> There are 3 stages in lifecycle of class-based components.
      1. Mounting
      2. Updating
      3. Unmounting

-> There are 2 phases in lifecycle of class based components.
      - Render phase: Pure and has no side effects. May be paused, aborted or restarted by React.:
      - Commit phase: Can work with DOM, run side effects, schedule updates.

-> There are 6 methods in Lifecycle of class-based components. They are:-
i) Under Mounting stage:
          (1) constructor(props)
          (2) render()
          (3) componentDidMount()

ii) Under Updating stage:
          (4) componentDidUpdate()
          (5) shouldComponentUpdate(nextProps, nextState)

iii) Under Unmounting stage:
         (6) componentWillMount()

NOTE: 
     - While console logging always 2 times printed. 
     - Due to we render <App/ > within <React.StrictMode> in index.js file. 
     - This makes React to check for two times each components are pure or not.
     - While updating at UI & DOM & triggers the rerender the components .
1 Like

cycle methods for class based comp are -
1 constructor
2. render
3 componentDidMount
4 ComponentDidUpdate
5 shouldComponentUpdate
6. ComponentWillUnmount

1 Like

there are three types of life cycle methods
1.mounting - constructor ,render, componentDidmount, shouldcomponentupdate methods
2.updating
3.unmounting

1 Like