About Me • Software developer at Legal Robot • Do all things Frontend with JavaScript • Student in college • Lover of CSS • Foodie • Noisemaker coder_blvck hacktivist123
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
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
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()
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.
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.
Updating An update can be caused by changes to props or state, Under the Updating Category we have: • shouldComponentUpdate() • render() • componentDidUpdate()
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).
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().
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.
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
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.
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
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
hacktivist123
tomotaka_yamasaki
iwasiman
kanamasa
hcrane
y0gi
tkmnzm
paper2
coe401_
m_seki
sasakendayo
kubode
usamik26
cromwellryan
tanoku
bkeepers
3n
jeffersonlam
ddemaree
notwaldorf
erikaheidi
malarkey
speakerdeck
paulrobertlloyd