https://github.com/lastnamearya/react-lifecycles-deepdive
Diving Deep into React Component LifeCycles
https://github.com/lastnamearya/react-lifecycles-deepdive
lifecycle-components react react-components react-life-cycle react-life-cycle-demo react-lifecycle-hooks reactjs
Last synced: about 2 months ago
JSON representation
Diving Deep into React Component LifeCycles
- Host: GitHub
- URL: https://github.com/lastnamearya/react-lifecycles-deepdive
- Owner: lastnamearya
- License: mit
- Created: 2018-07-13T08:41:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-13T13:09:52.000Z (almost 8 years ago)
- Last Synced: 2025-04-08T06:45:03.007Z (about 1 year ago)
- Topics: lifecycle-components, react, react-components, react-life-cycle, react-life-cycle-demo, react-lifecycle-hooks, reactjs
- Language: JavaScript
- Homepage:
- Size: 63.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
Awesome Lists containing this project
README
# React Component Lifecycle Deep Dive
### Component Life Cycle methods
**Mounting**
*These methods are called when an instance of a component is being created and inserted into the DOM:*
- constructor()
- static getDerivedStateFromProps()
- componentWillMount()
- render()
- componentDidMount()
* * *
**Updating**
*An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:*
- componentWillReceiveProps()
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
* * *
**Unmounting**
*This method is called when a component is being removed from the DOM:*
- componentWillUnmount()
* * *
**Error Handling**
*This method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.*
- componentDidCatch()
### Component Life Cycle methods that are deprecated now (after React 16.3)
- componentWillMount() // Use constructor()
- componentWillReceiveProps() // Use getDerivedStateFromProps()
- componentWillUpdate() // Use getSnapshotBeforeUpdate()