{"id":13725993,"url":"https://github.com/reactjs/react-lifecycles-compat","last_synced_at":"2025-05-15T00:09:14.433Z","repository":{"id":28603468,"uuid":"118845765","full_name":"reactjs/react-lifecycles-compat","owner":"reactjs","description":"Backwards compatibility polyfill for React class components","archived":false,"fork":false,"pushed_at":"2023-04-20T05:51:58.000Z","size":349,"stargazers_count":459,"open_issues_count":32,"forks_count":26,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-30T21:02:36.591Z","etag":null,"topics":["api","compatibility","polyfill","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-01-25T01:36:04.000Z","updated_at":"2025-03-03T14:46:53.000Z","dependencies_parsed_at":"2024-02-04T17:38:40.548Z","dependency_job_id":null,"html_url":"https://github.com/reactjs/react-lifecycles-compat","commit_stats":{"total_commits":85,"total_committers":12,"mean_commits":7.083333333333333,"dds":0.3294117647058824,"last_synced_commit":"63efc084c320917505a1ac69fb1251bb5f3e5e86"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-lifecycles-compat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-lifecycles-compat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-lifecycles-compat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-lifecycles-compat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactjs","download_url":"https://codeload.github.com/reactjs/react-lifecycles-compat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253017077,"owners_count":21840894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","compatibility","polyfill","react"],"created_at":"2024-08-03T01:02:46.177Z","updated_at":"2025-05-15T00:09:09.320Z","avatar_url":"https://github.com/reactjs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-lifecycles-compat\n\n## What is this project?\n\nReact 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).\n\nTypically, 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.\n\n## How can I use the polyfill\n\nFirst, install the polyfill from NPM:\n```sh\n# Yarn\nyarn add react-lifecycles-compat\n\n# NPM\nnpm install react-lifecycles-compat --save\n```\n\nNext, 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).)\n\nLastly, use the polyfill to make the new lifecycles work with older versions of React:\n```js\nimport React from 'react';\nimport {polyfill} from 'react-lifecycles-compat';\n\nclass ExampleComponent extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // Normally this method would only work for React 16.3 and newer,\n    // But the polyfill will make it work for older versions also!\n  }\n\n  getSnapshotBeforeUpdate(prevProps, prevState) {\n    // Normally this method would only work for React 16.3 and newer,\n    // But the polyfill will make it work for older versions also!\n  }\n\n  // render() and other methods ...\n}\n\n// Polyfill your component so the new lifecycles will work with older versions of React:\npolyfill(ExampleComponent);\n\nexport default ExampleComponent;\n```\n\n## Which lifecycles are supported?\n\nCurrently, 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.\n\n## Validation\n\nNote that in order for the polyfill to work, none of the following lifecycles can be defined by your component: `componentWillMount`, `componentWillReceiveProps`, or `componentWillUpdate`.\n\nNote also that if your component contains `getSnapshotBeforeUpdate`, `componentDidUpdate` must be defined as well.\n\nAn error will be thrown if any of the above conditions are not met.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-lifecycles-compat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactjs%2Freact-lifecycles-compat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-lifecycles-compat/lists"}