I went through all you need to know about React component lifecycle methods.

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