{"id":17976743,"url":"https://github.com/unixzii/use-mount-effect","last_synced_at":"2025-03-25T15:31:19.172Z","repository":{"id":216256212,"uuid":"740800583","full_name":"unixzii/use-mount-effect","owner":"unixzii","description":"A hook triggered only once on mount.","archived":false,"fork":false,"pushed_at":"2024-01-10T02:27:27.000Z","size":74,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-17T17:43:55.092Z","etag":null,"topics":["hooks","javascript","library","react","react-hooks"],"latest_commit_sha":null,"homepage":"","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/unixzii.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}},"created_at":"2024-01-09T05:02:09.000Z","updated_at":"2024-07-30T05:52:01.000Z","dependencies_parsed_at":"2024-01-09T08:45:27.848Z","dependency_job_id":"85295f96-0127-4b86-b1c9-727b8f90bc9b","html_url":"https://github.com/unixzii/use-mount-effect","commit_stats":null,"previous_names":["unixzii/use-mount-effect"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unixzii%2Fuse-mount-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unixzii%2Fuse-mount-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unixzii%2Fuse-mount-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unixzii%2Fuse-mount-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unixzii","download_url":"https://codeload.github.com/unixzii/use-mount-effect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245489764,"owners_count":20623789,"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":["hooks","javascript","library","react","react-hooks"],"created_at":"2024-10-29T17:24:56.539Z","updated_at":"2025-03-25T15:31:18.658Z","avatar_url":"https://github.com/unixzii.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `useMountEffect`\n\n[![npm version](https://badge.fury.io/js/use-mount-effect.svg)](https://badge.fury.io/js/use-mount-effect)\n\nA React hook triggered only once on mount.\n\n## Background\n\n\u003e Why does my effect run twice when the component mounts?? It's f\\*\\*king annoying!\n\nWell. That is not a bug in React, actually it's by design according to the [doc](https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts):\n\n\u003e When Strict Mode is on, in development, React runs setup and cleanup one extra time before the actual setup.\n\nThere are some workarounds to solve this problem, but people still feel it's a hassle. That's why I made this.\n\n## Install\n\n```\nnpm install --save use-mount-effect\n```\n\n## Usage\n\nBasic usage:\n\n```js\nimport { useMountEffect } from \"use-mount-effect\";\n\nconst MyComponent = () =\u003e {\n  useMountEffect(() =\u003e {\n    // Do something only when the component mounts.\n  });\n  return \u003cdiv\u003eBlah blah blah\u003c/div\u003e;\n};\n```\n\nWith cleanup:\n\n```js\nimport { useMountEffect } from \"use-mount-effect\";\n\nconst MyComponent = () =\u003e {\n  useMountEffect(() =\u003e {\n    // Do something only when the component mounts.\n    return () =\u003e {\n      // Do something only when the component unmounts.\n    };\n  });\n  return \u003cdiv\u003eBlah blah blah\u003c/div\u003e;\n};\n```\n\n## FAQ\n\n### Should I use this hook in production mode?\nActually, you don't need to use this hook in production mode, because it behaves just like `useEffect`. You should really fix your effects if you find your app works incorrectly due to the strict mode, because it implies some logic errors or resource leakage.\n\n**Always use this hook with caution.**\n\n### What's the difference between it and `useEffect`?\nThe cleanup callback is delayed until the next event loop when you use `useMountEffect`, even in production mode. Be sure to verify that it doesn't affect your code.\n\n### Do I really need this?\nJust one more reminder. `useEffect` doesn't run twice in production mode. And if there is no user-visible behavior difference between running it once and running it twice, you don't need `useMountEffect`. To learn more, check out [this](https://react.dev/learn/synchronizing-with-effects#sending-analytics).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funixzii%2Fuse-mount-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funixzii%2Fuse-mount-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funixzii%2Fuse-mount-effect/lists"}