React Life-Cycle Methods

There are three categories of lifecycle methods: mounting, updating, and unmounting.

1. React Life-Cycle Methods
Kavindu Samarasinghe (B.Sc)
Software Engineer

2. REACT LIFE-CYCLE METHODS
Mounting Updating Unmounting

3. Render
REACT LIFE-CYCLE METHODS
Mounting Updating Unmounting

4. Render
Constructor
static getDerivedStateFromProps
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
componentDidMount
Mounting Updating Unmounting
componentWillUnmount
Props
Change
setState() forceUpdate()
REACT LIFE-CYCLE METHODS

5. REACT LIFE-CYCLE METHODS - MOUNTING
constructor(props)
Initializes state and binds event handlers.
componentDidMount()
Called after the first render, ideal for fetching data, setting up subscriptions, or integrating
with DOM APIs.
getDerivedStateFromProps(props, state) (React 16.3+)
Automatically updates state based on changes in props.

6. REACT LIFE-CYCLE METHODS - UPDATING
shouldComponentUpdate(nextProps, nextState)
Determines if a component should re-render based on changes in props or state.
render()
Generates the component's HTML output based on its state and props.
componentDidUpdate(prevProps, prevState)
Called after the component re-renders, useful for side effects like DOM manipulation or
state updates based on the previous state.

7. REACT LIFE-CYCLE METHODS - UNMOUNTING
componentWillUnmount()
Called before a component is removed from the DOM, useful for cleaning up resources like
subscriptions or timers.