Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
React.js Component Lifecycle - Updating phase
The update lifecycle can be triggered by two events −
- Update of props by parent component
- Change in local state
Update of props by parent component
- componentWillReceiveProps(nextProps) −
- This is the first method which gets called on prop change. It contains one argument nextProps means the newly changed props.
- Here, we can synchronize local state with props if required
- If state is not needed to synchronize with props then probably no need to implement this method.
- Causing side effects should be avoided here. Because if side effects used here, it may results into re-render or performance issues.
Now, componentWillReceiveProps is deprecated and replaced by static method getDerivedStateFromProps(props,state). As name of method suggest clearly the use case.
Whenever we want a calculated or derived state from new props, we should use the above method.
- shouldComponentUpdate(nextProps, nextState) −
- This method returns a Boolean value true or false. Based on the return value React executes the render method which updates the actual DOM.
- We can add custom logic if requires in this method like comparing some variables to decide the process of updating.
- Side effects should be avoided.
- ComponentWillUpdate(nextProps, nextState) −
- This method executes once shouldComponentUpdate returns true.
- This can be the better place to sync state with props as it will be going to render for sure.
Side effects should be avoided here too.
Now, componentWillUpdate is deprecated. Latest method is getSnapshotBeforeUpdate, which can be used in rare cases. Example use case is identifying scroll positions of an element. This method executes just before actual update to DOM.
- Render −
- render method execution decides which changes needed to update on the actual DOM after comparison with using virtual DOM
- As usual, it will prepare the jsx code as per the update condition.
- It will also process the update of child components.
- We can return almost anything like a Boolean, null, a string, array, div, fragment etc from render method.
- componentDidUpdate
- Here, we can do side effects.
- But updating state using setState should be done with care. It should update only conditionally to avoid the infinite api call loop.
- Because componentDidUpdate gets called on every update after render method call.
Update triggered by internal changes
- If there is a change in state object using setState , this cycle of update gets called. This cycle starts with shouldComponentUpdate directly because the other methods which we shown in above deals with props and here we have not changed the props.
- The call hierarchy after shouldComponentUpdate will remain same.
shouldComponentUpdate=>componentWillUpdate=>render=>update child components=>componentDidUpdate
The update of elements on actual DOM can be checked using browser developer tool to see the impacts or performance issues.
If we use F12 or inspect element and click on three vertical dots on right side of that inspect window, we can see below options.
Click on More tools => rendering
Click on check box Paint flashing. Whenever there is an update of element on page it will be highlighted.
Use of this tool is to check which elements are getting updated and to find any performance issues. We can avoid unnecessary update of some elements using this tool.
226 Views
