{"id":13541478,"url":"https://github.com/Wavez/react-hooks-lifecycle","last_synced_at":"2025-04-02T09:31:54.341Z","repository":{"id":37441523,"uuid":"196048036","full_name":"Wavez/react-hooks-lifecycle","owner":"Wavez","description":"⚛️ 🪝 ⏳ React hooks lifecycle diagram: Functional components lifecycle explained","archived":false,"fork":false,"pushed_at":"2023-08-24T17:18:35.000Z","size":954,"stargazers_count":238,"open_issues_count":2,"forks_count":22,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-03T07:32:07.324Z","etag":null,"topics":["lifecycle","react","react-hooks","react-hooks-api"],"latest_commit_sha":null,"homepage":"https://wavez.github.io/react-hooks-lifecycle/","language":"HTML","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/Wavez.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},"funding":{"github":"Wavez"}},"created_at":"2019-07-09T16:45:54.000Z","updated_at":"2024-10-16T15:43:13.000Z","dependencies_parsed_at":"2024-01-16T15:45:02.364Z","dependency_job_id":"e1d76f12-2e52-487c-b272-b00b677912a9","html_url":"https://github.com/Wavez/react-hooks-lifecycle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavez%2Freact-hooks-lifecycle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavez%2Freact-hooks-lifecycle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavez%2Freact-hooks-lifecycle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavez%2Freact-hooks-lifecycle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wavez","download_url":"https://codeload.github.com/Wavez/react-hooks-lifecycle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246788613,"owners_count":20834121,"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":["lifecycle","react","react-hooks","react-hooks-api"],"created_at":"2024-08-01T10:00:48.755Z","updated_at":"2025-04-02T09:31:54.057Z","avatar_url":"https://github.com/Wavez.png","language":"HTML","funding_links":["https://github.com/sponsors/Wavez"],"categories":["HTML"],"sub_categories":[],"readme":"![Maintenance](https://img.shields.io/maintenance/yes/2022)\n[![react versions supported](https://img.shields.io/badge/React%20versions%3A-Latest-success \"React versions supported\")]()\n[![GitHub stars](https://img.shields.io/github/stars/Wavez/react-hooks-lifecycle)](https://github.com/Wavez/react-hooks-lifecycle/stargazers)\n[![Twitter Follow](https://img.shields.io/twitter/follow/MargalitGal?label=Follow%20@MargalitGal\u0026style=social)](https://twitter.com/MargalitGal)\n\n# React Hooks Lifecycle Diagram ⚛️ 🪝 ⏳ #\n[View the interactive diagram](https://wavez.github.io/react-hooks-lifecycle/)  \n  \n\u003ca href=\"https://wavez.github.io/react-hooks-lifecycle\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Wavez/react-hooks-lifecycle/master/screenshot.jpg\" /\u003e\n\u003c/a\u003e\n\n## 💡 Functional components lifecycle explained ##\n\nThis diagram is made using [draw.io](https://draw.io)\nand will be updated when react will introduce new hooks.  \n\nThis diagram was inspired by [Dan Abramov's tweet](https://twitter.com/dan_abramov/status/981712092611989509) (and its latter react [implementation](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)) of the now \"old\" 👴 Class Components lifecycle.\n\n##  📖  Further reading\n- [React hooks flow](https://github.com/donavon/hook-flow)\n- [React hooks API](https://reactjs.org/docs/hooks-reference.html)\n- [About this repo](https://medium.com/@galmargalit/react-function-components-hooks-lifecycle-diagram-14f76e0a5988)  \n\n\n## 🤗  Contributors\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification and its [emoji legend](https://allcontributors.org/docs/en/emoji-key).  \nContributions of any kind are welcome!\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Wavez\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2171199?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGal Margalit\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Wavez/react-hooks-lifecycle/commits?author=Wavez\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/Wavez/react-hooks-lifecycle/commits?author=Wavez\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#content-Wavez\" title=\"Content\"\u003e🖋\u003c/a\u003e \u003ca href=\"#maintenance-Wavez\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#design-Wavez\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"#blog-Wavez\" title=\"Blogposts\"\u003e📝\u003c/a\u003e \u003ca href=\"#projectManagement-Wavez\" title=\"Project Management\"\u003e📆\u003c/a\u003e \u003ca href=\"https://github.com/Wavez/react-hooks-lifecycle/pulls?q=is%3Apr+reviewed-by%3AWavez\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/albseb/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/12158859?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlbert Sebastian\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-albseb511\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Wavez/react-hooks-lifecycle/issues?q=author%3Aalbseb511\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#question-albseb511\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"#example-albseb511\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/eladcandroid\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/13297000?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eElad Cohen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Wavez/react-hooks-lifecycle/issues?q=author%3Aeladcandroid\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWavez%2Freact-hooks-lifecycle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWavez%2Freact-hooks-lifecycle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWavez%2Freact-hooks-lifecycle/lists"}