Understanding the React Component lifecycle

Transcript

1. by Chrysa Papadopoulou Understanding the React Component lifecycle
2. Components VS Elements 2 2
3. The first render 3 • A special version of the render() method that mounts our entire application on DOM • We pass in the root Element and tell React where to mount our content • React begins processing the passed Element(s) and generate instances of our React components • This is the point where we enter the Component life cycle 3
4. Spoiler Alert 4 4
5. Initialization 5 5
6. Mounting 6 6
7. componentWillMount - is it useless? 7 • Called only one time on initial component render • Can’t do anything involving the DOM • Shouldn’t initialize your configuration (we have constructor) • Can call setState. JUST DON’T - use default state 7
8. componentWillMount - when? 8 Prepare for initial render (eg. calculations, API calls) API calls should be done at the highest level component. 90% of your components should not use componentWillMount 8
9. component render() 9 • Should keep as pure method • Don’t setState - will cause a re-render infinitely!! • Don’t access DOM element. Warning: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. 9
10. componentDidMount 10 • Invoked once, immediately after the initial rendering occurs • Can do anything you couldn’t do because there was no DOM • Allowed to call setState 10
11. Mounting 11 When component is being created and inserted into the DOM methods that will be called: • constructor() • componentWillMount() • render() • componentDidMount() 11
12. Updating 12 12
13. componentWillReceiveProps 13 • Is not called on initial render • Some data finally came to our component to mess our state! • We have access to both current props (this.props) and new props that came to our component! 13
14. shouldComponentUpdate 14 • An answer to the question, “should I re-render?” • Always returns a boolean • By default returns true • You can improve performance. Use with caution. Should call setState? NO 14
15. componentWillUpdate 15 • Answer to the question “Want me to do anything before I re-render?” • Same as componentWillReceiveProps, except you are not allowed to call setState If you are using shouldComponentUpdate AND need to do something when props change, componentWillUpdate makes sense. Eg. Dispatch events, animations 15
16. componentDidUpdate 16 • Does the same stuff we did in componentDidMount • Two arguments are passed: prevProps and prevState • Is the inverse of componentWillUpdate() • Not advised to use .setState 16
17. Updating 17 Caused by changes to props or state. Methods called: • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • render • componentDidUpdate 17
18. Error Handling 18 componentDidCatch() Is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component. 18
19. Unmounting 19 19
20. componentWillUnmount 20 • Component will go away • Last requests (outgoing network requests, remove all event listeners associated) • Should not call setState • When it’s gone, it should be completely gone 20
21. Example 21 by Artemij Fedosejev 21
22. Chrysa Papadopoulou | www.linkedin.com/in/chrysap Thank you!