1. you need to set the display name
2. you need to set the wrapped component
3. you need to hoist statics
4. and with this update, you'd forward refs
Granted, I could just write it myself real quick, but it'd be nice to just have an API you could use that doesn't require you to fully grasp all the complications that come with using a HOC. I've recently just deferred to using render props instead of HOCs. Render props also require way less complex type definitions if you're using flow or typescript.
[0]: https://github.com/ReactTraining/react-router/blob/master/pa...
There are still rarer cases where callback refs are useful. For example when you need to run a side effect on a node as it attaches and detaches.
Also note: legacy lifecycles are not deprecated yet. You won’t see the warnings unless you opt in with <StrictMode>. They will be officially deprecated in a future minor release when more libraries have had time to update.
You asked "Curious, what do you use it for?" in regard to componentWillReceiveProps
https://news.ycombinator.com/item?id=16695064
I use componentWillReceiveProps for just about everything - I had thought it was a fundamental part of the Redux flow. i.e. Redux updates, new props flow through the hierarchy, I pick that up in componentWillReceiveProps and make changes based on new props.
Is this not correct?
What you're describing sounds more like you're updating something external (e.g. your Redux store). This isn't what the lifecycle is meant for, and you'd be better off using componentDidUpdate instead.
While that’s a little tongue in cheek, the lifecycle method names I would rate as a drastic drop in intuitiveness:
Previous:
componentWillMount
componentWillReceiveProps
componentWillUpdate
New: getDerivedStateFromProps
getSnapshotBeforeUpdateYou still have `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` that should be used more commonly and do exactly what you expect them to.
Thanks to you and brianvaughn for answering so many questions.
The biggest one is probably adding event listeners or setting up subscriptions (which can cause memory leaks).
Here are some others: https://github.com/reactjs/rfcs/blob/master/text/0006-static...
> Is it correct to say that `getSnapshotBeforeUpdate` is named to indicate what you were supposed to use `componentWillMount` for?
No. `getSnapshotBeforeUpdate` is not really related to `componentWillMount`. It relates more to what people were using `componentWillUpdate` for.
* Context overhaul that makes it way easier to pass state/props down multiple levels of components. Uses function as a child for the API
* Adds React.createRef function to create refs. Creating refs through callbacks is still a thing for advanced cases, but this provides a more ergonomic API to replace the old clunky ref={(c) => this._yourthing = c} type callback.
* Adds React.forwardRef, which solves the issue of HOC not passing refs to the component they're wrapping.
* Lifecycle methods (componentWillMount, componentWillReceiveProps, and componentWillUpdate) are now considered legacy, and will be deprecated in future releases. To replace them, they added two new ones (getDerivedStateFromProps and getSnapshotBeforeUpdate). This is due to these lifecycle methods interfering with the goals of async rendering and other ambitious ideas.
* Adds a StrictMode component, which basically just causes React to log more errors during development about deprecated/legacy APIs and unexpected side effects.