{"id":18335300,"url":"https://github.com/bhovhannes/use-force-update-hook","last_synced_at":"2025-04-06T04:34:02.755Z","repository":{"id":34496567,"uuid":"179737209","full_name":"bhovhannes/use-force-update-hook","owner":"bhovhannes","description":"React hook which allows forceUpdate() in functional components","archived":false,"fork":false,"pushed_at":"2024-04-14T08:35:21.000Z","size":2949,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T09:53:28.226Z","etag":null,"topics":["forceupdate","functional-components","hook","react"],"latest_commit_sha":null,"homepage":"","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/bhovhannes.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-04-05T18:46:00.000Z","updated_at":"2024-04-20T01:25:53.733Z","dependencies_parsed_at":"2023-02-18T14:15:19.225Z","dependency_job_id":"2a3908c6-8012-4aa7-9b22-093a621e13c8","html_url":"https://github.com/bhovhannes/use-force-update-hook","commit_stats":{"total_commits":685,"total_committers":4,"mean_commits":171.25,"dds":"0.18686131386861315","last_synced_commit":"4b87f2cffea2d1cdf03abea4f4e16b82944635cc"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fuse-force-update-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fuse-force-update-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fuse-force-update-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fuse-force-update-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhovhannes","download_url":"https://codeload.github.com/bhovhannes/use-force-update-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247435043,"owners_count":20938530,"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":["forceupdate","functional-components","hook","react"],"created_at":"2024-11-05T19:54:35.835Z","updated_at":"2025-04-06T04:34:02.430Z","avatar_url":"https://github.com/bhovhannes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-force-update-hook\n\n[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] [![Coverage][codecov-image]][codecov-url]\n\nReact hook which gives [forceUpdate](https://reactjs.org/docs/react-component.html#forceupdate) to functional components.\n\n## Install\n\n```\nnpm i --save-dev use-force-update-hook\n```\n\n## Usage\n\nThis package exports 2 hooks: `useForceUpdate` and `useForceUpdateWithCallback`.\n\nNormally you shoud use `useForceUpdate` hook:\n\n```javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useForceUpdate } from 'use-force-update-hook'\n\nfunction MyAwesomeComponent() {\n  const forceUpdate = useForceUpdate()\n\n  console.log('render')\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={forceUpdate}\u003eClick to rerender MyAwesomeComponent\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nIn rare cases you may need to do something right after component `forceUpdate` finishes.  \nIn that case `useForceUpdateWithCallback` can be useful. It uses `useLayoutEffect` under the hood.\n\n```javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useForceUpdateWithCallback } from 'use-force-update-hook'\n\nfunction MyAwesomeComponent() {\n  function handleUpdate() {\n    console.log('just updated')\n  }\n\n  const forceUpdate = useForceUpdateWithCallback(handleUpdate)\n\n  console.log('render')\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={forceUpdate}\u003eClick to rerender MyAwesomeComponent\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## License\n\nMIT (http://www.opensource.org/licenses/mit-license.php)\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n[npm-url]: https://www.npmjs.org/package/use-force-update-hook\n[npm-version-image]: https://img.shields.io/npm/v/use-force-update-hook.svg?style=flat\n[npm-downloads-image]: https://img.shields.io/npm/dm/use-force-update-hook.svg?style=flat\n[codecov-url]: https://codecov.io/gh/bhovhannes/use-force-update-hook\n[codecov-image]: https://img.shields.io/codecov/c/github/bhovhannes/use-force-update-hook.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhovhannes%2Fuse-force-update-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhovhannes%2Fuse-force-update-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhovhannes%2Fuse-force-update-hook/lists"}