- Break into groups, learn about individual lifecycle methods
- Teach each lifecycle method to the larger group
- Learn about
componentDidCatch, and how to use it
- Be able to identify when each lifecycle method is called
- Be able to give an example of how you might use each lifecycle method
LifeCycle Methods: An Interactive Adventure
Later this year (2018), the React team will unveil async rendering. Per the docs, this is “a strategy for cooperatively scheduling rendering work by periodically yielding execution to the browser. The upshot is that, with async rendering, apps are more responsive because React avoids blocking the main thread.” This is going to play a big part in the future of React. In anticipation of this release, React has begun making some changes that will help prepare us for async rendering. Among those changes are getting rid of some lifecycle methods that are now considered UNSAFE to use and adding a few new lifecycle methods.
We talked earlier this week about the Birth/Mounting Phase that a class based React component goes through when it is created. Today, we are going to spend a little time learning about the other 2 phases of a component’s lifecycle. You’re going to split up into groups and each group will be given a lifecycle method to research and learn about. You will then teach the rest of the class about your assigned lifecycle method. There are a number of resources at the bottom of this lesson that you can use, but by no means are you limited to just the ones here.
Phase 1: Birth/Mounting (see previous lesson)
You’ve seen this before… this is where we call the inherited constructor
super), and set our initial state.
componentWillMount() - will be deprecated with React 17
This legacy method is now unsafe to use and should be replaced with
static getDerivedStateFrom Props - NEW with React 16.3.0
See the explaination in growth/updating.
Yup, render is a lifecycle method. You should be returning JSX from it. Also, render isn’t the place for any complex logic. Keep it as dumb as possible.
componentDidMount is just called one time, in this birth/mounting process.
This is important to remember when you’re making API calls. If you need to make
an API call after the component has already called
need to do it somewhere else.
Phase 2: Growth/Updating
componentWillReceiveProps() - will be deprecated with React 17
This legacy method is now unsafe to use, and should be replaced with
static getDerivedStateFromProps - NEW with React 16.3.0
This method exists for only one purpose… it enables a component to update its internal state as the result of changes in props. Since this method is static, you can’t refernece
this in it. Whatever object
is returned from this method is what the state of the component will be set to.
This new method will be called on the initial mounting of the component, as well
as when it’s re-rendered.
shouldComponentUpdate returns true or false, and is an opportunity to optimize
your application. If
shouldComponentUpdate returns false, the rest of the
lifecycle methods will not fire (i.e. render). Think about why you might want
componentWillUpdate() - will be deprecated with React 17
This legacy method is now unsafe and shouldn’t be used going forward.
getSnapshotBeforeUpdate - NEW with React 16.3.0
This method is called right before any DOM manipulations are made. If you need to do any calculations that you’d like to use in componentDidUpdate(), you can return those in this method, and they will get passed along as a the third argument to componentDidUpdate()
The same render as in Birth/Mounting phase
Per the docs: “Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to the previous props (e.g. a network request may not be necessary if the props have not changed).”
Phase 3: Death/Unmounting
This is invoked just once, before the component is unmounted and destroyed. It’s a good place to invalidate any open network requests, kill any timers, and do any other necessary cleanup tasks.
componentDidCatch() - just know this exists
componentDidCatch allows you to set up error boundaries in your application,
and display fallback UI rather than just letting the error crash into the
console. Check the references below for more information.