From 2d65e8fe1d22c62f5cfab96723a3bdc58a6e835b Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Tue, 10 Apr 2018 12:34:11 -0500 Subject: [PATCH] Add Access The Latest Lifecycle Methods In An Old App as a react til --- README.md | 3 +- ...-latest-lifecycle-methods-in-an-old-app.md | 33 +++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 react/access-the-latest-lifecycle-methods-in-an-old-app.md diff --git a/README.md b/README.md index a39718b..d6f176f 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_660 TILs and counting..._ +_661 TILs and counting..._ --- @@ -449,6 +449,7 @@ _660 TILs and counting..._ ### React - [A Component Is Just A Bag Of Data](react/a-component-is-just-a-bag-of-data.md) +- [Access The Latest Lifecycle Methods In An Old App](react/access-the-latest-lifecycle-methods-in-an-old-app.md) - [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md) - [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md) - [Building A React App In The Browser](react/building-a-react-app-in-the-browser.md) diff --git a/react/access-the-latest-lifecycle-methods-in-an-old-app.md b/react/access-the-latest-lifecycle-methods-in-an-old-app.md new file mode 100644 index 0000000..7ce5bd6 --- /dev/null +++ b/react/access-the-latest-lifecycle-methods-in-an-old-app.md @@ -0,0 +1,33 @@ +# Access The Latest Lifecycle Methods In An Old App + +With the release of React 16.3 we have access to some new lifecycle methods +and are in the first phase of what will eventually result in the deprecation +and removal of `componentWillMount`, `componentWillReceiveProps`, and +`componentWillUpdate`. + +You may not be ready to move your project to React 16.3, but that doesn't +mean you can't start migrating your lifecycle methods now. We'll need a +polyfill -- +[react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat). + +```javascript +import React from 'react'; +import { pollyfill } from 'react-lifecycles-compat'; + +class MyComponent extends React.Component { + static getDerivedStateFromProps(nextProps, prevState) { + // ... + } + + render() { ... } +} +polyfill(MyComponent) + +export default MyComponent; +``` + +For any of our class components for which we'd like to start using the new +lifecycle methods, we just need to import the polyfill function and then +transform the class component with the polyfill before exporting it. + +[source](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#open-source-project-maintainers)