{"id":20788868,"url":"https://github.com/erkobridee/react-lifecycle-hooks","last_synced_at":"2025-05-05T18:36:30.894Z","repository":{"id":48836056,"uuid":"350391639","full_name":"erkobridee/react-lifecycle-hooks","owner":"erkobridee","description":"useful react hooks to manage any function component lifecycle","archived":false,"fork":false,"pushed_at":"2023-12-15T11:47:44.000Z","size":1674,"stargazers_count":12,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-01T18:38:59.169Z","etag":null,"topics":["lifecycle","npm-package","package","react","react-hooks","rollup","typescript"],"latest_commit_sha":null,"homepage":"https://erkobridee.github.io/react-lifecycle-hooks","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erkobridee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-22T15:20:16.000Z","updated_at":"2023-11-05T09:15:37.000Z","dependencies_parsed_at":"2022-09-16T01:25:09.121Z","dependency_job_id":null,"html_url":"https://github.com/erkobridee/react-lifecycle-hooks","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Freact-lifecycle-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Freact-lifecycle-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Freact-lifecycle-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Freact-lifecycle-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erkobridee","download_url":"https://codeload.github.com/erkobridee/react-lifecycle-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225053455,"owners_count":17413606,"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","npm-package","package","react","react-hooks","rollup","typescript"],"created_at":"2024-11-17T15:17:38.044Z","updated_at":"2024-11-17T15:17:38.672Z","avatar_url":"https://github.com/erkobridee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Actions Status](https://github.com/erkobridee/react-lifecycle-hooks/workflows/CI%20-%20build%20and%20publish/badge.svg)](https://github.com/erkobridee/react-lifecycle-hooks/actions/workflows/publish.yml) [![codecov](https://codecov.io/gh/erkobridee/react-lifecycle-hooks/branch/main/graph/badge.svg)](https://codecov.io/gh/erkobridee/react-lifecycle-hooks) [![GitHub license](https://img.shields.io/github/license/erkobridee/react-lifecycle-hooks)](https://github.com/erkobridee/react-lifecycle-hooks/blob/main/LICENSE) [![GitHub Repo stars](https://img.shields.io/github/stars/erkobridee/react-lifecycle-hooks?style=social)](https://github.com/erkobridee/react-lifecycle-hooks) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://erkobridee.github.io/react-lifecycle-hooks)\n\n# react lifecycle hooks\n\nAccording to [A Complete Guide to useEffect | Overreacted](https://overreacted.io/a-complete-guide-to-useeffect/)\n\n\u003e Keep in mind that the mental model for effects is different from componentDidMount and other lifecycles, and trying to find their exact equivalents may confuse you more than help\n\nSo, to keep peace of mind and manage any function component lifecycle, follow the equivalents hooks to the cases: `useConstructor`, `useDidMount`, `useDidUpdate` and `useWillUnmount`, plus `useForceRender`\n\n👋\u0026nbsp;\u0026nbsp;**IMPORTANT:** this library requires a peer dependency of the react.js [v16.8.0](https://github.com/facebook/react/releases/tag/v16.8.0) or newer\n\n## Install\n\n```\nnpm install --save @erkobridee/react-lifecycle-hooks\n```\n\nif you are using on a TypeScript, you'll need to install\n\n```\nnpm install --save-dev @erkobridee/ts-definitions-common\n```\n\n## API\n\n### useConstructor\n\n```javascript\nimport { useConstructor } from '@erkobridee/react-lifecycle-hooks';\n\nexport const Component = () =\u003e {\n  useConstructor(() =\u003e console.log(`executes before mount the component`));\n\n  return \u003cdiv\u003eComponent\u003c/div\u003e;\n};\n\nexport default Component;\n```\n\n### useDidMount\n\n```javascript\nimport { useDidMount } from '@erkobridee/react-lifecycle-hooks';\n\nexport const Component = () =\u003e {\n  useDidMount(() =\u003e console.log(`executes after component mounted`));\n\n  return \u003cdiv\u003eComponent\u003c/div\u003e;\n};\n\nexport default Component;\n```\n\n### useDidUpdate\n\n```javascript\nimport React from 'react';\n\nimport { useDidUpdate } from '@erkobridee/react-lifecycle-hooks';\n\nexport const Component = () =\u003e {\n  const [count, setCount] = React.useState(0);\n\n  useDidUpdate(() =\u003e console.log(`executes whenever the component updates`));\n\n  useDidUpdate(() =\u003e console.log(`count value updated to ${count}`), [count]);\n\n  const resetClickHandler = () =\u003e setCount(0);\n\n  const addClickHandler = () =\u003e setCount((prevValue) =\u003e prevValue + 1);\n\n  const subtractClickhandler = () =\u003e setCount((prevValue) =\u003e prevValue - 1);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eComponent\u003c/div\u003e\n      \u003cdiv\u003ecount: {count}\u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={resetClickHandler}\u003ereset\u003c/button\u003e\n        \u003cbutton onClick={addClickHandler}\u003eadd\u003c/button\u003e\n        \u003cbutton onClick={subtractClickhandler}\u003esubtract\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Component;\n```\n\n### useWillUnmount\n\n```javascript\nimport React from 'react';\n\nimport { useWillUnmount } from '@erkobridee/react-lifecycle-hooks';\n\nconst InnerComponent = () =\u003e {\n  useWillUnmount(() =\u003e console.log(`executes before unmount the component`));\n\n  return \u003cdiv\u003eInner Component\u003c/div\u003e;\n};\n\nconst Component = () =\u003e {\n  const [show, setShow] = React.useState(true);\n\n  const removeClickHandler = () =\u003e setShow(false);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eComponent\u003c/div\u003e\n      {show \u0026\u0026 (\n        \u003cdiv\u003e\n          \u003cbutton onClick={removeClickHandler}\u003eremove\u003c/button\u003e\n          \u003cInnerComponent /\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n\nexport default Component;\n```\n\n### useForceRender\n\n```javascript\nimport React from 'react';\n\nimport { useForceRender } from '@erkobridee/react-lifecycle-hooks';\n\nexport const Component = () =\u003e {\n  const forceRender = useForceRender();\n\n  const forceRenderClickHandler = () =\u003e forceRender();\n\n  React.useEffect(() =\u003e {\n    console.log(`component render`);\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eComponent\u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cbutton click={forceRenderClickHandler}\u003eforce render\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Component;\n```\n\n## Useful references\n\n- React.js Docs\n\n  - [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)\n\n  - [The Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle)\n\n  - [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)\n\n- [6 Reasons to Use React Hooks Instead of Classes | by Dilantha Prasanjith | Bits and Pieces](https://blog.bitsrc.io/6-reasons-to-use-react-hooks-instead-of-classes-7e3ee745fe04) - 2020/09/14\n\n- [React Components vs. React Hooks | by Gerardo Fernández - Better Programming](https://betterprogramming.pub/react-components-vs-react-hooks-52932d4ab6db) - 2019/10/11\n\n- [React Hooks: everything you need to know! 🚀 | Softwareontheroad](https://softwareontheroad.com/react-hooks/) - (2019/03/10) The new React Hooks API is here and it's gonna change the way you develop react apps 🔥\n\n- [Under the hood of React’s hooks system | The Guild Blog](https://the-guild.dev/blog/react-hooks-system) - 2018/11/21\n\n- [Under-the-hood of React Hooks | by Craig Taub - ITNEXT](https://itnext.io/under-the-hood-of-react-hooks-805dc68581c3) - 2020/04/15\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkobridee%2Freact-lifecycle-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferkobridee%2Freact-lifecycle-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkobridee%2Freact-lifecycle-hooks/lists"}