Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (Do And Don’t Valuable Checklist Summary Of React Component Lifecycle Methods).
In this note series, we will learn about the ReactJS Component Lifecycle methods checklist. And, this checklist points us to the principles of each lifecycle component method. So, this article will demonstrate the below React Component Lifecycle Methods checklist :
- constructor
- render
- componentDidMount
- componentDidUpdate
- shouldComponentUpdate
- componentWillUnmount
- static getDerivedStateFromError
- componentDidCatch
So Let’s begin.
1. constructor
DO
- Assign the initial state to this.state directly.
- Prepare all class fields and bind functions that will be passed as callbacks.
DON’T
- Cause any side effects (AJAX calls, subscriptions etc.)
- Call setState()
- Copy props into state (only use this pattern if we intentionally want to ignore prop updates).
2. render
DO
- Return a valid javascript value.
- The render() function should be pure.
DON’T
- Call setState()
3. componentDidMount
DO
- Set up subscriptions
- Network requests
- May setState() immediately (Use this pattern with caution, because It often causes performance issues).
DON’T
- Call this.setState as it will result in a re-render.
4. componentDidUpdate
DO
- Network requests Incase if the props have changed otherwise not required.
- May call setState() immediately in componentDidUpdate() ,but it must be wrapped in a condition.
DON’T
- Call this.setState as it will result in a re-render.
5. shouldComponentUpdate
DO
- Use to increase performance of components.
DON’T
- Cause any side effects (AJAX calls etc.)
- Call this.setState
6. componentWillUnmount
DO
- Remove any timers or listeners created in the life span of the component.
DON’T
- Call this.setState, start new listeners or timers.
7. static getDerivedStateFromError
DO
- Catch errors and return them as state objects.
- Handle fallback rendering.
DON’T
- Cause any side effects
8. componentDidCatch
DO
- Side effects are permitted
- Log errors
DON’T
- Render a fallback UI with componentDidCatch() by calling setState.
Conclusion
In this note series, We understood about DO and DON’T checklist of the ReactJS lifecycle methods.
Thanks for reading! I hope you enjoyed and learned about DO and DON’T checklist of the React lifecycle methods. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
You can also follow official website and tutorials of React as below links :
If you have any comments, questions, or think I missed something, feel free to leave them below.
Thanks again Reading. HAPPY READING !!???
This is the right blog for anyone who wants to find out about this topic. You realize so much its almost hard to argue with you (not that I actually would want…HaHa). You definitely put a new spin on a topic thats been written about for years. Great stuff, just great!