A Short Note – Do And Don’t Valuable Checklist Summary Of React Component Lifecycle Methods

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 !!???



Summary
Article Name
A Short Note - Do And Don't Valuable Checklist Summary Of React Component Lifecycle Methods
Description
This article explains Do And Don't Valuable Checklist Summary Of React Component Lifecycle Methods with the principles of each lifecycle component method.
Author

One thought on “A Short Note – Do And Don’t Valuable Checklist Summary Of React Component Lifecycle Methods”

  1. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Exit mobile version