Do and Don't summary of React Component Lifecycle Methods
Download as PPTX, PDF1 like142 views
The document provides Do's and Don'ts for React component lifecycle methods. It discusses the constructor, render, componentDidMount, componentDidUpdate, shouldComponentUpdate, getDerivedStateFromError, and componentDidCatch methods. Key points include: assign initial state in constructor; return valid JS in render; setup subscriptions/requests in componentDidMount; call setState conditionally in componentDidUpdate; remove listeners in shouldComponentUpdate; catch errors and return state in getDerivedStateFromError; log errors in componentDidCatch. The document also provides contact details for the author.
Do and Don't summary of React Component Lifecycle Methods
- 1. Do and DoN'T Summary of React Component Lifecycle Methods Sunil Mishra 11 May 2020
- 2. Agenda • Do and DON’T List of React Component Lifecycle Methods
- 3. 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)
- 4. render () Method • DO • Return a valid javascript value • The render() function should be pure. • DON’T • Call setState()
- 5. componentDidMount() Method • DO • Setup subscriptions • Network requests • May setState() immediately (Use this pattern with caution, because it often cause performance issues). • DON’T • Call this.setState as it will result in a re-render.
- 6. componentDidUpdate() Method • DO • Network requests incase if the props have changed otherwise not required. • May 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.
- 7. shouldComponentUpdate() Method • DO • Remove any timers or listeners created in the life span of the component • DON’T • Call this.setState, start new listeners or timers.
- 8. static getDerivedStateFromError() Method • DO • Catch errors and return them as state objects. • Handle fallback rendering. • DON’T • Cause any side effects.
- 9. componentDidCatch() Method • DO • Side effects are permitted • Log errors • DON’T • Render a fallback UI with componentDidCatch() by calling setState.
- 11. Thank You !! 😊😊😊