Understanding the life cycle of the React component
React provides developers with a variety of methods and hooks that are called during a component's life cycle, they allow us to update the UI and the state of the application. When it is necessary to use each of them, what needs to be done and in what methods, and what is better to refuse, is the key to understanding how to work with React.
Update:
In React 16.3, two additional life-cycle methods appeared and several methods were declared obsolete, for details on the link .
(Note of the translator: Although some methods are declared obsolete, their description, in my opinion, would still be useful, at least for those developers who work with previous versions of React and in general, instead of understanding which methods and for what new ones were introduced. Article link added below)
Constructor:
')
Designers are the main OOP - this is such a special function that will be called whenever a new object is created. It is very important to call the super function in cases where our class extends the behavior of another class that has a constructor. Executing this special function will call the constructor of our parent class and allow it to initialize itself. That is why we have access to this.props only after calling super. (meaning the call super (props) in the heir class React.Component)
Therefore, constructors are a great place to initialize a component — creating any fields (variables starting with this.) Or initializing the state of the component based on the received props.
This is also the only place where you can change / set the state by directly overwriting the this.state field. In all other cases, you must use this.setState.
DO:
DO NOT DO IT:
[deprecated] componentWillMount
componentWillMount is not very different from the constructor — it is also called only once in the initial life cycle. In general, there have historically been some reasons to use componentWillMount over the constructor - see the react-redux issue , but at the moment the practice described there is outdated.
Many may be tempted to use this function to send a request for receiving data and they will expect that the data will be available before the initial render is completed. But this is not the case - although the requester will be initialized before the render, it will not have time to execute before the render will be called.
In addition, with changes to React Fiber (after the release of React 16 beta), this function can be called several times before calling the initial render, which can lead to various side effects associated with this. Therefore, it is not recommended to use this function to perform any operations that cause side effects.
It is also important to note that this function is called when server-side rendering is used, when its antipode componentDidMount is not called on the server, but will be on the client. Therefore, if some side effect is aimed at the server side, this function can be used as an exception.
Finally, the setState function can be used freely and will not cause a component to be redrawn.
DO:
DO NOT DO IT:
[deprecated] componentWillReceiveProps (nextProps)
This function will be called at each update of the life cycle, which will occur during changes in props (when the parent component is redrawn) and will accept mapping of all transmitted props, whether the value of a property has changed or not since the previous redrawing phase.
This function will be ideal if you have any component whose state part (state) depends on the props transmitted from the parent component, since calling this.setState here will not cause additional redrawing.
Remember that because This function is called with all props, even with those that have not changed, the developer is expected to write a check in order to understand whether the actual value of a property has changed or not.
For example:
Due to the fact that in React Fiber (after 16 beta) this function may be called several times before the render function, it is not recommended to perform here any operations that cause side effects.
DO:
DO NOT DO IT:
shouldComponentUpdate (nextProps, nextState, nextContext)
By default, all components will redraw themselves whenever their state changes, their context changes, or they accept props from the parent. If component redrawing is rather heavy (for example, generating charts, graphics) or is not recommended for any performance reasons, then developers have access to a special function that will be called every time during an update cycle.
This function will be called with the following values ​​of props, state (state) and object. And the developer can use these parameters in order to decide whether to redraw the component or return false and prevent it. Otherwise, you are expected to return true.
DO:
DO NOT DO IT:
[deprecated] componentWillUpdate (nextProps, nextState)
If we have not implemented the function shouldComponentUpdate or have decided that the component should be updated in this render cycle, another life cycle function will be called. This function is mainly used to make synchronization between the state and the props in case part of the component state is based on any props.
In cases where shouldComponentUpdate is implemented, the componentWillUpdate function can be used instead of componentWillReceiveProps, since it will be called only when the component is actually redrawn.
Like all other componentWill * functions, this function can be called several times before render, so it is not recommended to perform any operations that cause side effects here.
DO:
DO NOT DO IT:
componentDidUpdate (prevProps, prevState, prevContext)
This function will be called after the render function has completed, in each redraw cycle. This means that you can be sure that the component and all its child components have already redrawn themselves.
In this regard, this function is the only function that is guaranteed to be called only once in each redraw cycle, so it is recommended to perform any side effects here. As componentWillUpdate and componentWillRecieveProps, previous props, state (state) and context are transferred to this function, even if there were no changes in these values. Therefore, developers must manually check the transferred values ​​for changes and only then perform various update operations.
DO:
DO NOT DO IT:
The exception to the rule above is a status update, which is based on any DOM properties that can be calculated only after the component has been redrawn (for example, the position / size of any DOM nodes). But be careful and prevent re-updating if the value has not actually changed, because this can lead to cyclic redrawing.
componentDidCatch (errorString, errorInfo)
Addition in React 16 - this method of the life cycle is special, because it allows you to respond to events occurring in the child component, and specifically to any uncaught errors in any of the child components.
With this add-on, you can make your parent element an error handler. For example, write error information to the component state, return the corresponding message to the render, or make error logging.
When any error occurs, this function is called with the following parameters:
componentDidMount
This function will be called only once in the entire life cycle of this component and will signal that the component and all its child components have been rendered without errors.
Since this function is guaranteed to be called only once, then it is an excellent candidate for performing any side effects, such as AJAX requests.
DO:
DO NOT DO IT:
The exception to the rule above is a status update, which is based on any DOM properties that can be calculated only after the component has been redrawn (for example, the position / size of any DOM nodes). But be careful and prevent re-updating if the value has not actually changed, because this can lead to cyclic redrawing.
componentWillUnmount
Use this function to “clean up” after a component if it uses timers (setTimeout, setInterval), opens sockets, or performs any operations that need to be closed or deleted.
DO:
DO NOT DO IT:
There are several reasons why a component may redraw, and depending on the cause, various functions are called to allow the developer to update certain parts of the component.
Create component
The first loop is the creation of a component, which usually occurs when the component is first detected in the parsed JSX tree:
The component is redrawn due to the redrawing of the parent component.
Component is redrawn due to internal changes (for example, call this.setState ())
Component redrawn due to call this.forceUpdate
Component redrawn due to error interception
Entered in React 16 as ErrorBoundaries. A component can define a special layer that can intercept errors and provide a new lifecycle method — componentDidCatch — that allows the developer to process or log these errors.
@James_k_nelson - Recently published componentWillRecieveProps simulator. HERE you can find and play with this simulator.
Release 16.3 introduced some new lifecycle functions that replaced existing ones to provide better support for the new asynchronous nature of React.
static getDerivedStateFromProps (nextProps, prevState)
The main responsibility of this new feature is to make sure that the state and props are synchronized when necessary. Its main meaning is the replacement componentWillRecieveProps.
getDerivedStateFromProps is a static function and therefore does not have access to this - instead you are expected to return an object that will be passed on to the future state of the component (just like working with setState!)
This function is used when the component is updated, but also when it is mounted, immediately after the constructor call, so you no longer need to use the constructor if you want to set the initial state of the component from props.
getSnapshotBeforeUpdate (prevProps, prevState)
The other of the two new functions is called in the so-called “pre-commit phase”, right before the changes from the VDOM that are to be mapped to the DOM.
It can be used mainly if you need to read the current state of the DOM.
For example, you have an application in which new messages are added on top of the screen - if the user scrolls down and a new message is added, the screen will “jump” and this will make the UI harder to use. By adding getSnapshotBeforeUpdate, you can calculate the current position of the scroll and restore it via the DOM update.
Although the function is not static, it is recommended to return the value, rather than update the component. The return value will be passed to componentDidUpdate as the 3rd parameter.
Outdated features
Despite the fact that the new features make your transition to AsyncMode easier, you are not forced to migrate all your code. The following features will be marked obsolete and renamed in the following releases:
You will see the versions in the next major version, and the functions will be renamed (the renamed versions will be saved!) In version 17.0
Dan Abramov summarized all the changes in one picture:
Thanks for attention!
Update:
In React 16.3, two additional life-cycle methods appeared and several methods were declared obsolete, for details on the link .
(Note of the translator: Although some methods are declared obsolete, their description, in my opinion, would still be useful, at least for those developers who work with previous versions of React and in general, instead of understanding which methods and for what new ones were introduced. Article link added below)
Constructor:
')
Designers are the main OOP - this is such a special function that will be called whenever a new object is created. It is very important to call the super function in cases where our class extends the behavior of another class that has a constructor. Executing this special function will call the constructor of our parent class and allow it to initialize itself. That is why we have access to this.props only after calling super. (meaning the call super (props) in the heir class React.Component)
Therefore, constructors are a great place to initialize a component — creating any fields (variables starting with this.) Or initializing the state of the component based on the received props.
This is also the only place where you can change / set the state by directly overwriting the this.state field. In all other cases, you must use this.setState.
DO:
- Set the initial state of the component
- If the class properties syntax is not used, prepare all the fields of the class and call bind on those functions that will be passed as callbacks.
DO NOT DO IT:
- Do not perform any side effects (AJAX calls, etc.)
[deprecated] componentWillMount
componentWillMount is not very different from the constructor — it is also called only once in the initial life cycle. In general, there have historically been some reasons to use componentWillMount over the constructor - see the react-redux issue , but at the moment the practice described there is outdated.
Many may be tempted to use this function to send a request for receiving data and they will expect that the data will be available before the initial render is completed. But this is not the case - although the requester will be initialized before the render, it will not have time to execute before the render will be called.
In addition, with changes to React Fiber (after the release of React 16 beta), this function can be called several times before calling the initial render, which can lead to various side effects associated with this. Therefore, it is not recommended to use this function to perform any operations that cause side effects.
It is also important to note that this function is called when server-side rendering is used, when its antipode componentDidMount is not called on the server, but will be on the client. Therefore, if some side effect is aimed at the server side, this function can be used as an exception.
Finally, the setState function can be used freely and will not cause a component to be redrawn.
DO:
- Update the state with this.setState
- Perform the latest optimizations
- Cause side effects (AJAX call, etc.) only in the case of server-side-rendering.
DO NOT DO IT:
- Do not perform any side effects (AJAX Challenge, etc.) on the client side.
[deprecated] componentWillReceiveProps (nextProps)
This function will be called at each update of the life cycle, which will occur during changes in props (when the parent component is redrawn) and will accept mapping of all transmitted props, whether the value of a property has changed or not since the previous redrawing phase.
This function will be ideal if you have any component whose state part (state) depends on the props transmitted from the parent component, since calling this.setState here will not cause additional redrawing.
Remember that because This function is called with all props, even with those that have not changed, the developer is expected to write a check in order to understand whether the actual value of a property has changed or not.
For example:
componentWillReceiveProps(nextProps) { if(nextProps.myProp !== this.props.myProps) { // nextProps.myProp , myProps // - . } } Due to the fact that in React Fiber (after 16 beta) this function may be called several times before the render function, it is not recommended to perform here any operations that cause side effects.
DO:
- Synchronize state with props
DO NOT DO IT:
- Do not perform any side effects (AJAX calls, etc.)
shouldComponentUpdate (nextProps, nextState, nextContext)
By default, all components will redraw themselves whenever their state changes, their context changes, or they accept props from the parent. If component redrawing is rather heavy (for example, generating charts, graphics) or is not recommended for any performance reasons, then developers have access to a special function that will be called every time during an update cycle.
This function will be called with the following values ​​of props, state (state) and object. And the developer can use these parameters in order to decide whether to redraw the component or return false and prevent it. Otherwise, you are expected to return true.
DO:
- Use to optimize component performance
DO NOT DO IT:
- Do not perform any side effects (AJAX calls, etc.)
- Do not call this.setState
[deprecated] componentWillUpdate (nextProps, nextState)
If we have not implemented the function shouldComponentUpdate or have decided that the component should be updated in this render cycle, another life cycle function will be called. This function is mainly used to make synchronization between the state and the props in case part of the component state is based on any props.
In cases where shouldComponentUpdate is implemented, the componentWillUpdate function can be used instead of componentWillReceiveProps, since it will be called only when the component is actually redrawn.
Like all other componentWill * functions, this function can be called several times before render, so it is not recommended to perform any operations that cause side effects here.
DO:
- Synchronize state with props
DO NOT DO IT:
- Do not perform any side effects (AJAX calls, etc.)
componentDidUpdate (prevProps, prevState, prevContext)
This function will be called after the render function has completed, in each redraw cycle. This means that you can be sure that the component and all its child components have already redrawn themselves.
In this regard, this function is the only function that is guaranteed to be called only once in each redraw cycle, so it is recommended to perform any side effects here. As componentWillUpdate and componentWillRecieveProps, previous props, state (state) and context are transferred to this function, even if there were no changes in these values. Therefore, developers must manually check the transferred values ​​for changes and only then perform various update operations.
componentDidUpdate(prevProps) { if(prevProps.myProps !== this.props.myProp) { // this.props.myProp // // / - // AJAX - this.props.myProp } } DO:
- Perform side effects (AJAX calls, etc.)
DO NOT DO IT:
- Do not call this.setState because this will cause a cyclic redraw.
The exception to the rule above is a status update, which is based on any DOM properties that can be calculated only after the component has been redrawn (for example, the position / size of any DOM nodes). But be careful and prevent re-updating if the value has not actually changed, because this can lead to cyclic redrawing.
componentDidCatch (errorString, errorInfo)
Addition in React 16 - this method of the life cycle is special, because it allows you to respond to events occurring in the child component, and specifically to any uncaught errors in any of the child components.
With this add-on, you can make your parent element an error handler. For example, write error information to the component state, return the corresponding message to the render, or make error logging.
componentDidCatch(errorString, errorInfo) { this.setState({ error: errorString }); ErrorLoggingTool.log(errorInfo); } render() { if(this.state.error) return <ShowErrorMessage error={this.state.error} /> return ( // render normal component output ); } When any error occurs, this function is called with the following parameters:
- errorString - .toString () error message
- errorInfo is an object with a single componentStack field that contains the framerays where the error occurred.
in Thrower in div (created by App) in App componentDidMount
This function will be called only once in the entire life cycle of this component and will signal that the component and all its child components have been rendered without errors.
Since this function is guaranteed to be called only once, then it is an excellent candidate for performing any side effects, such as AJAX requests.
DO:
- Perform side effects (AJAX calls, etc.)
DO NOT DO IT:
- Do not call this.setState because this will cause a redraw.
The exception to the rule above is a status update, which is based on any DOM properties that can be calculated only after the component has been redrawn (for example, the position / size of any DOM nodes). But be careful and prevent re-updating if the value has not actually changed, because this can lead to cyclic redrawing.
componentWillUnmount
Use this function to “clean up” after a component if it uses timers (setTimeout, setInterval), opens sockets, or performs any operations that need to be closed or deleted.
DO:
- Delete timers and listeners created during the life of the component.
DO NOT DO IT:
- Do not call this.setState, do not start new listeners or timers.
Component cycles
There are several reasons why a component may redraw, and depending on the cause, various functions are called to allow the developer to update certain parts of the component.
Create component
The first loop is the creation of a component, which usually occurs when the component is first detected in the parsed JSX tree:
The component is redrawn due to the redrawing of the parent component.
Component is redrawn due to internal changes (for example, call this.setState ())
Component redrawn due to call this.forceUpdate
Component redrawn due to error interception
Entered in React 16 as ErrorBoundaries. A component can define a special layer that can intercept errors and provide a new lifecycle method — componentDidCatch — that allows the developer to process or log these errors.
@James_k_nelson - Recently published componentWillRecieveProps simulator. HERE you can find and play with this simulator.
React 16.3+ component life cycle
Release 16.3 introduced some new lifecycle functions that replaced existing ones to provide better support for the new asynchronous nature of React.
static getDerivedStateFromProps (nextProps, prevState)
The main responsibility of this new feature is to make sure that the state and props are synchronized when necessary. Its main meaning is the replacement componentWillRecieveProps.
getDerivedStateFromProps is a static function and therefore does not have access to this - instead you are expected to return an object that will be passed on to the future state of the component (just like working with setState!)
This function is used when the component is updated, but also when it is mounted, immediately after the constructor call, so you no longer need to use the constructor if you want to set the initial state of the component from props.
getSnapshotBeforeUpdate (prevProps, prevState)
The other of the two new functions is called in the so-called “pre-commit phase”, right before the changes from the VDOM that are to be mapped to the DOM.
It can be used mainly if you need to read the current state of the DOM.
For example, you have an application in which new messages are added on top of the screen - if the user scrolls down and a new message is added, the screen will “jump” and this will make the UI harder to use. By adding getSnapshotBeforeUpdate, you can calculate the current position of the scroll and restore it via the DOM update.
Although the function is not static, it is recommended to return the value, rather than update the component. The return value will be passed to componentDidUpdate as the 3rd parameter.
Outdated features
Despite the fact that the new features make your transition to AsyncMode easier, you are not forced to migrate all your code. The following features will be marked obsolete and renamed in the following releases:
- componentWillRecieveProps - UNSAFE_componentWillRecieveProps
- componentWillUpdate - UNSAFE_componentWillUpdate
You will see the versions in the next major version, and the functions will be renamed (the renamed versions will be saved!) In version 17.0
Dan Abramov summarized all the changes in one picture:
Thanks for attention!
Source: https://habr.com/ru/post/358090/
All Articles