this is react doc. This lifecycle was previously named componentWillMount. That name will continue to work until version 17. But What's the difference between componentWillMount and UNSAFE_componentWillMount in ReactJS.
componentDidMount() is only called once, on the client, compared to componentWillMount() which is called twice, once to the server and once on the client. It is called after the initial render when the client received data from the server and before the data is displayed in the browser.
The componentWillMount() lifecycle hook is primarily used to implement server-side logic before the actual rendering happens, such as making an API call to the server. In this guide, you will learn to use componentWillMount() and make API calls after the initial component rendering.
The function is replaced with class constructor.
UNSAFE_componentWillMount() is invoked just before mounting occurs. It is called before render() , therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead for initializing state.
Both lifecycle methods do the same in React 16.
The difference is that componentWillMount
will not exist in future versions of React from version 17 onward.
So if you want your code to work in future versions of React, you have two choices:
UNSAFE_componentWillMount
The lifecycle method was renamed to make sure developers realize that there is a better way than using the UNSAFE
method.
There is no difference other than the name. This method is now legacy and will be deprecated in the future. Actually this name is an alias for the real one. Like, just a warning that using this method is unsafe.
Using both those names work with the current release. In a future release (16.x) there will be a warning in dev mode. In the 17 release without using UNSAFE
prefix this method won't work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With