{"id":21004636,"url":"https://github.com/flaque/use-timeout","last_synced_at":"2025-05-15T01:33:08.796Z","repository":{"id":47954123,"uuid":"214277668","full_name":"Flaque/use-timeout","owner":"Flaque","description":"A react-hook for accessing setTimeout without constantly resetting.","archived":false,"fork":false,"pushed_at":"2021-08-11T13:44:56.000Z","size":32,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-11T13:52:33.057Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Flaque.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-10T20:18:07.000Z","updated_at":"2023-03-14T23:10:16.000Z","dependencies_parsed_at":"2022-08-12T15:01:19.653Z","dependency_job_id":null,"html_url":"https://github.com/Flaque/use-timeout","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flaque%2Fuse-timeout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flaque%2Fuse-timeout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flaque%2Fuse-timeout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flaque%2Fuse-timeout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Flaque","download_url":"https://codeload.github.com/Flaque/use-timeout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225320964,"owners_count":17456109,"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":[],"created_at":"2024-11-19T08:37:17.934Z","updated_at":"2024-11-19T08:37:18.576Z","avatar_url":"https://github.com/Flaque.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-timeout\n\n[![License](https://img.shields.io/npm/l/use-timeout.svg)](https://github.com/flaque/use-timeout/blob/master/package.json)\n\nA react-hook for accessing setTimeout without constantly resetting.\n\n## Install\n\n```\nyarn add @flaque/use-timeout\n```\n\n## Usage\n\n```ts\nconst [setTimeoutHook, clearTimeoutHook] = useTimeout();\n\nsetTimeoutHook(() =\u003e {\n  console.log(\"It's been 10000 miliseconds!\");\n}, 10000);\n\n// ...\n\nclearTimeoutHook(); // Stops the timeout before it happens\n```\n\n## Why?\n\nIf you call `setTimeout` inside of a function component like this:\n```ts\n// BAD DONT DO THIS\nfunction MyComponent() {\n  const [isLoading, setIsLoading] = useState(false)\n  \n  setTimeout(() =\u003e {\n    setIsLoading(true)\n  }, 1000)\n  \n  return \u003cp\u003e{isLoading ? \"loading\" : \"finished\"}\u003c/p\u003e \n}\n// BAD DONT DO THIS \n```\n\nThen it'll get reset when the function renders. That can lead to weird unexpected behavior. `use-timeout` uses hooks to keep an internal reference to the timeout to avoid any weirdness. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaque%2Fuse-timeout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflaque%2Fuse-timeout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaque%2Fuse-timeout/lists"}