{"id":13457723,"url":"https://github.com/wojtekmaj/react-lifecycle-methods-diagram","last_synced_at":"2025-05-13T20:13:32.302Z","repository":{"id":39120769,"uuid":"128258065","full_name":"wojtekmaj/react-lifecycle-methods-diagram","owner":"wojtekmaj","description":"Interactive React Lifecycle Methods diagram.","archived":false,"fork":false,"pushed_at":"2025-04-30T19:09:21.000Z","size":5029,"stargazers_count":3927,"open_issues_count":8,"forks_count":321,"subscribers_count":51,"default_branch":"main","last_synced_at":"2025-05-08T13:30:53.287Z","etag":null,"topics":["cheatsheet","diagram","react","react-lifecycle"],"latest_commit_sha":null,"homepage":"https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/","language":"TypeScript","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/wojtekmaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"wojtekmaj","open_collective":"react-lifecycle-methods-diagram"}},"created_at":"2018-04-05T20:03:26.000Z","updated_at":"2025-05-05T11:35:12.000Z","dependencies_parsed_at":"2023-09-23T02:10:21.689Z","dependency_job_id":"c60dd02b-c432-40c1-acc8-0a3071abae0f","html_url":"https://github.com/wojtekmaj/react-lifecycle-methods-diagram","commit_stats":{"total_commits":462,"total_committers":50,"mean_commits":9.24,"dds":"0.15367965367965364","last_synced_commit":"5200afdb9aeb933c2d5291be45357fcf6f8e2224"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Freact-lifecycle-methods-diagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Freact-lifecycle-methods-diagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Freact-lifecycle-methods-diagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Freact-lifecycle-methods-diagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wojtekmaj","download_url":"https://codeload.github.com/wojtekmaj/react-lifecycle-methods-diagram/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253838456,"owners_count":21972161,"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":["cheatsheet","diagram","react","react-lifecycle"],"created_at":"2024-07-31T09:00:34.434Z","updated_at":"2025-05-13T20:13:32.263Z","avatar_url":"https://github.com/wojtekmaj.png","language":"TypeScript","funding_links":["https://github.com/sponsors/wojtekmaj","https://opencollective.com/react-lifecycle-methods-diagram","https://opencollective.com/react-calendar"],"categories":["TypeScript","JavaScript","目录","🌐 Web Development - Frontend"],"sub_categories":[],"readme":"[![CI](https://github.com/wojtekmaj/react-lifecycle-methods-diagram/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-lifecycle-methods-diagram/actions)\n\n# React Lifecycle Methods diagram\n\nAn interactive version of [React Lifecycle Methods diagram tweeted by Dan Abramov](https://twitter.com/dan_abramov/status/981712092611989509). Built with React, obviously.\n\nI did my best to make the diagram fully accessible, both for keyboard navigation and screen readers for visually impaired people.\n\n[Online version](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) is also available!\n\n## How to use the diagram\n\n- Click any method name to read its official documentation (opens in a new tab).\n- Methods in **bold** are the most common ones.\n- Actions that are not methods, but otherwise help reading the diagram, are in _italics_.\n\n## Collaboration\n\nYou are welcome to raise issues and create pull requests.\n\nParticularly valuable contributions are those regarding [i18n](https://en.wikipedia.org/wiki/i18n) as I only know so many languages. Adding new locale is pretty easy, but there's a [separate i18n guide](/src/i18n/README.md) in case you get lost.\n\nYou can also add a new version of the diagram in case React lifecycle methods are changed. There is a [separate versions guide](/src/versions/README.md) in case you get lost.\n\n### Prerequisites\n\nTo contribute, you need to have the following prerequisites installed:\n\n- Node.js\n- Yarn\n- IDE of your choice\n\n### Starting the project\n\n- `yarn install` (first time only)\n- `yarn dev`\n\n### Building the project\n\n- `yarn build`\n\n## License\n\nThe MIT License.\n\n## Author\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/wojtekmaj.png?s=100\" width=\"100\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Wojciech Maj\u003cbr /\u003e\n      \u003ca href=\"mailto:kontakt@wojtekmaj.pl\"\u003ekontakt@wojtekmaj.pl\u003c/a\u003e\u003cbr /\u003e\n      \u003ca href=\"https://wojtekmaj.pl\"\u003ehttps://wojtekmaj.pl\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Thank you\n\n### Sponsors\n\nThank you to all our sponsors! [Become a sponsor](https://opencollective.com/react-lifecycle-methods-diagram#sponsor) and get your image on our README on GitHub.\n\n\u003ca href=\"https://opencollective.com/react-lifecycle-methods-diagram#sponsors\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-calendar/sponsors.svg?width=890\"\u003e\u003c/a\u003e\n\n### Backers\n\nThank you to all our backers! [Become a backer](https://opencollective.com/react-lifecycle-methods-diagram#backer) and get your image on our README on GitHub.\n\n\u003ca href=\"https://opencollective.com/react-calendar#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-lifecycle-methods-diagram/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n### Top Contributors\n\nThank you to all our contributors that helped on this project!\n\n![Top Contributors](https://opencollective.com/react-lifecycle-methods-diagram/contributors.svg?width=890\u0026button=false)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekmaj%2Freact-lifecycle-methods-diagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwojtekmaj%2Freact-lifecycle-methods-diagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekmaj%2Freact-lifecycle-methods-diagram/lists"}