A Short Note – Do and Don’t Checklist Summary of React Component Lifecycle Methods

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.

In this note series, we will learn about the ReactJS Component Lifecycle checklist which point us the principles of each lifecycle component methods . We will try to explain through DO and DON’T checklist of the lifecycle methods. We discuss the below ReactJS Component Lifecycle methods checklist :

  • constructor
  • render
  • componentDidMount
  • componentDidUpdate
  • shouldComponentUpdate
  • componentWillUnmount
  • static getDerivedStateFromError
  • componentDidCatch

reactjs_do_dont_summary


So Let’s begin.

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 you intentionally want to ignore prop updates).
render
 
DO
  • Return a valid javascript value.
  • The render() function should be pure.
DON’T
  • Call setState()
 
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.
 
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. 
shouldComponentUpdate
DO
  • Use to increase performance of components.
DON’T
  • Cause any side effects (AJAX calls etc.)
  • Call this.setState
 
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.
 
static getDerivedStateFromError
 
DO
  • Catch errors and return them as state objects.
  • Handle fallback rendering.
DON’T
  • Cause any side effects
 
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 ReactJS 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.

If you have any comments, questions, or think I missed something, feel free to leave them below.

Thanks again Reading. HAPPY READING !!😊😊😊
 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s