React Life Cycle Methods

Photo by Tudor Baciu on Unsplash

What are Life Cycles?

React has 3 main phases Mounting, Updating, and Unmounting. Lets start with Mounting

Mounting

Mounting means putting elements into the DOM. React has 4 built in components methods that get called when mounting a component.

The Render method will always be called. The others are optional.

The Constructor method is called before anything else. it’s used to set up the initial state and other initial values. You can pass in props as arguments. But make sure you pass it to the super() inside as well so that you can use the props with the proper context.

The getDerivedStateFromProps() method sets the passed props into the state of the component you are in

The render() method is required and it’s the method that actually allows us to render HTML the DOM.

The componentDidMount() is called after the component is rendered.

Updating

getDerivedStateFromProps() gets called again but in another phase. This time its’s called as soon as a component get updated.

shouldComponentUpdate() returns a Boolean Value that specifies weather or not React should render. The default value is true but it can be used to return false.

render() Rendered gets called again after the update is complete.

getSnapShotBeforeUpdate() Grants you access to the state and props before the update so that you can check and compare your previous values to your current values to see if there were any updates. If you using this to prevent errors you have to inclued the componentDidMount() method.

componentDidUpdate()is called after the DOM is updated.

Unmounting

componentWillUnmount() is called after the component has been removed from the DOM.

Conclusion

In conclusion you have a general understanding of what lifecycle phases and what the methods are including what they do. Happy Coding!

A Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store