Optimizing Your Use of React Component Lifecycle: When, Why

Slides for my talk at the first-ever React Summit in Africa.

Transcript

1. Optimizing your use of React Component Lifecycle Methods - Why,When,How By Shedrack Akintayo
2. About Me • Software developer at Legal Robot • Do all things Frontend with JavaScript • Student in college • Lover of CSS • Foodie • Noisemaker coder_blvck hacktivist123
3. Overview • What are React Lifecycle methods • Explanation of all the important Lifecycle methods. • Why do we need to optimize our use of React Lifecycle methods. • When do we need to use React Lifecycle methods. • Pure Components • Why do we need pure components • When do we need pure components
4. What are React Lifecycle methods Every Component in your React App is going to go through a lifecycle. React lifecycle methods is categorized into three with different methods under each category: • Mounting • Updating • Unmounting
5. Mounting This is when your component is first created or when it first mounts the DOM. Under the Mounting category we have; • constructor() • getDerivedStateFromProps() • render() • componentDidMount()
6. constructor() constructor(props) { super(props); this.state = {}; } Øperform any initial setup Øcalled once per mounted component Øinitialize state ØMust call super(props)
7. getDerievedStateFromProps() It enables a component to update it's internal state as the results are changing in our props.
8. render() This is where react takes out JSX code and prepares it to be rendered to the DOM. It's the only one required lifecycle method in a component,and whe called it will generally return some form of JSX.
9. componentDidMount() componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
10. Updating An update can be caused by changes to props or state, Under the Updating Category we have: • shouldComponentUpdate() • render() • componentDidUpdate()
11. shouldComponentUpdate() This receives the next props and the next state. An alternative to this is to use pure components.
12. componentDidUpdate() • componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. • This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
13. Unmounting This method is called when a component is being removed from the DOM, the method under it include: • componentWillUnmount()
14. componentWillUnmount() This method is invoked immediately a component is being removed or destroyed from the DOM. You can Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().
15. Why do we need to optimize our use of React Lifecycle methods The main reason we need to optimize our use of React Lifecycle methods is because: • It lets us control what happens when each tiny section of our UI renders, updates, thinks about re-rendering, and then disappears entirely. • It is important and necessary • It Increases performance and Load time.
16. When do we need to use React Component Lifecycle methods It’s really necessary to use React Component lifecycle methods • We use componentWillMount most times for App configuration in the root component • We use componentDidMount when starting AJAX calls to load in data for our component. • We use shouldComponentUpdate when we need to control exactly when our component should re-render • We use componentDidUpdate when we need to update the DOM in response to prop or state changes • We use componentWillUnmount when we need to clean up useless code from our component
17. Pure Components Pure components are the simplest, fastest components we can write. They are easy to write, simple to reason about, and the quickest component we can write.
18. Why do we need Pure Components • The usage of Pure Component gives a considerable increase in performance because it reduces the number of render operation in the application. • A Pure component can replace a component that only has a render function. Instead of making a full-blown component just to render some content to the screen, we can create a pure one instead. • It’s simple to write, fast and very understandable
19. When do we need Pure components • in cases where you want to use lifecycle methods of Component then we have to use Pure Components as stateless components don't have lifecycle methods. • In cases where you want to avoid re-rendering previous API requests to the DOM
20. DEMO CODE Visit: https://github.com/hacktivist123/React-Component-lifecycle
21. References and Additional Resources • https://reactjs.org/docs/react-component.html • http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ • https://engineering.musefind.com/react-lifecycle-methods-how- and-when-to-use-them-2111a1b692b1 • https://tylermcginnis.com/an-introduction-to-life-cycle-events-in- react-js/
22. Thank You!!!!! coder_blvck hacktivist123