React works in two phases: render and commit.
- The render phase determines what changes need to be made to e.g. the DOM. During this phase, React calls render and then compares the result to
the previous render.
- The commit phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.)
React also calls lifecycles like
componentDidMount and componentDidUpdate during this phase.
Render phase lifecycles include among others, the following lifecycle methods:
-
componentWillMount (or its alias UNSAFE_componentWillMount)
-
componentWillReceiveProps (or its alias UNSAFE_componentWillReceiveProps)
-
componentWillUpdate (or its alias UNSAFE_componentWillUpdate)
These are considered unsafe and also happen to be the lifecycles that cause the most confusion within the React community and tend to encourage
unsafe coding practices.
class Foo extends React.Component {
UNSAFE_componentWillMount() {} // Noncompliant
UNSAFE_componentWillReceiveProps() {} // Noncompliant
UNSAFE_componentWillUpdate() {} // Noncompliant
}
