# react-lifecycles-compat

> Backwards compatibility polyfill for React class components

Latest version **3.0.4** (published 2018-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-lifecycles-compat
pnpm add react-lifecycles-compat
yarn add react-lifecycles-compat
bun add react-lifecycles-compat
```

## Health

**Score 38/100 (D)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2018-05-11 |
| First published | 2018-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-lifecycles-compat) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 459 |
| Maintainers | acdlite, brianvaughn, fb, flarnie, gaearon, sophiebits, trueadm |

## Links

- npm: https://www.npmjs.com/package/react-lifecycles-compat
- Repository: https://github.com/reactjs/react-lifecycles-compat
- Homepage: https://github.com/reactjs/react-lifecycles-compat#readme
- Issues: https://github.com/reactjs/react-lifecycles-compat/issues
- npm.io page: https://npm.io/package/react-lifecycles-compat

## Recent versions

- 3.0.4 (latest) — 2018-05-11
- 2.0.2 (v-2) — 2018-04-12
- 1.1.1 (next) — 2018-04-02
- 3.0.3 — 2018-05-09
- 3.0.2 — 2018-04-11
- 3.0.1 — 2018-04-10
- 3.0.0 — 2018-04-09
- 2.0.1 — 2018-04-09
- 2.0.0 — 2018-04-05
- 1.1.4 — 2018-04-03
- 1.1.3 — 2018-04-03
- 1.1.2 — 2018-04-02
- 1.1.0 — 2018-03-29
- 1.0.2 — 2018-01-31
- 1.0.1 — 2018-01-31
- … 2 more at https://npm.io/package/react-lifecycles-compat/versions

## README

# react-lifecycles-compat

## What is this project?

React version 17 will deprecate several of the class component API lifecycles: `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (Read the [Update on Async rendering blog post](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) to learn more about why.) A couple of new lifecycles are also being added to better support [async rendering mode](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html).

Typically, this type of change would require third party libraries to release a new major version in order to adhere to semver. However, the `react-lifecycles-compat` polyfill offers a way to use the new lifecycles with older versions of React as well (0.14.9+) so no breaking release is required. This enables shared libraries to support both older and newer versions of React simultaneously.

## How can I use the polyfill

First, install the polyfill from NPM:
```sh
# Yarn
yarn add react-lifecycles-compat

# NPM
npm install react-lifecycles-compat --save
```

Next, update your component and replace any of the deprecated lifecycles with new ones introduced with React 16.3. (Refer to the React docs for [examples of how to use the new lifecycles](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html).)

Lastly, use the polyfill to make the new lifecycles work with older versions of React:
```js
import React from 'react';
import {polyfill} from 'react-lifecycles-compat';

class ExampleComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // Normally this method would only work for React 16.3 and newer,
    // But the polyfill will make it work for older versions also!
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Normally this method would only work for React 16.3 and newer,
    // But the polyfill will make it work for older versions also!
  }

  // render() and other methods ...
}

// Polyfill your component so the new lifecycles will work with older versions of React:
polyfill(ExampleComponent);

export default ExampleComponent;
```

## Which lifecycles are supported?

Currently, this polyfill supports [static `getDerivedStateFromProps`](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) and [`getSnapshotBeforeUpdate`](https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate)- both introduced in version 16.3.

## Validation

Note that in order for the polyfill to work, none of the following lifecycles can be defined by your component: `componentWillMount`, `componentWillReceiveProps`, or `componentWillUpdate`.

Note also that if your component contains `getSnapshotBeforeUpdate`, `componentDidUpdate` must be defined as well.

An error will be thrown if any of the above conditions are not met.

---
_Source: https://npm.io/package/react-lifecycles-compat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._