{"id":28237004,"url":"https://github.com/bytebodger/use-debouncer","last_synced_at":"2025-06-10T15:30:54.121Z","repository":{"id":57167237,"uuid":"351065308","full_name":"bytebodger/use-debouncer","owner":"bytebodger","description":"A custom React Hook for tracking which API calls are currently in-flight","archived":false,"fork":false,"pushed_at":"2021-03-24T14:43:53.000Z","size":167,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T00:17:33.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bytebodger.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-24T12:06:32.000Z","updated_at":"2021-03-24T14:43:55.000Z","dependencies_parsed_at":"2022-08-30T15:21:56.215Z","dependency_job_id":null,"html_url":"https://github.com/bytebodger/use-debouncer","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/bytebodger%2Fuse-debouncer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fuse-debouncer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fuse-debouncer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fuse-debouncer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytebodger","download_url":"https://codeload.github.com/bytebodger/use-debouncer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fuse-debouncer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258503559,"owners_count":22711842,"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":"2025-05-19T00:17:14.811Z","updated_at":"2025-06-10T15:30:54.111Z","avatar_url":"https://github.com/bytebodger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-debouncer\n\nA custom React Hook for tracking which API calls are currently in-flight. The intention is to keep duplicate \"fat-fingered\" requests from being made to an API - e.g., when user double/triple clicks on a \"Submit\" button.\n\n## Methodology\n\nThe Hook uses a simple queue (`Array`) of strings - presumably, those strings represent endpoint URLs. It is up the caller to add new calls to the queue, and to remove old calls once a response is received.\n\n## Usage\n\n```javascript\nexport const useApi = () =\u003e {\n   const debouncer = useDebouncer();\n   \n   const post = async (url = '', data = {}, headers = {}) =\u003e {\n      if (debouncer.isAlreadyInFlight(url))\n         return;\n      const response = await axios({\n         data,\n         headers,\n         method: 'POST',\n         url,\n      }).catch(error =\u003e {\n         debouncer.removeApiCall(url);\n      });\n      debouncer.removeApiCall(url);\n      return response;\n   }\n   \n   return {\n      post\n   }\n}\n```\n\n## Methods\n\n### .addApiCall()\n\n```javascript\nconst API = {\n   arguments: {\n      url: {\n         required,\n         format: non - empty string,\n      },\n   },\n   returns: Array of inflight calls,\n}\n```\n\n### .clearApiCalls()\n\n```javascript\nconst API = {\n   arguments: {\n      // none\n   },\n   returns: Array of inflight calls,\n}\n```\n\n### .isAlreadyInFlight()\n\n```javascript\nconst API = {\n   arguments: {\n      url: {\n         required,\n         format: non - empty string,\n      },\n   },\n   returns: Boolean,\n}\n```\n\n### .removeApiCall()\n\n```javascript\nconst API = {\n   arguments: {\n      url: {\n         required,\n         format: non - empty string,\n      },\n   },\n   returns: Array of inflight calls,\n}\n```\n\n**Examples:**\n\n```javascript\nconst SomeComponent = () =\u003e {\n   const debouncer = useDebouncer();\n   const endpoint = '/some/endpoint';\n   \n   const sendRequest = async () =\u003e {\n      if (debouncer.isAlreadyInFlight(endpoint))\n         return;\n      debouncer.addApiCall(endpoint);\n      await doTheApiCall()\n         .catch(() =\u003e debouncer.removeApiCall(endpoint));\n      debouncer.removeApiCall(endpoint);\n   }\n   \n   return \u003c\u003e\n      \u003cbutton onClick={sendRequest}\u003e\n         Send\n      \u003c/button\u003e\n      \u003cbr/\u003e\n      \u003cbutton onClick={debouncer.clearApiCalls}\u003e\n         Clear\n      \u003c/button\u003e\n   \u003c/\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebodger%2Fuse-debouncer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytebodger%2Fuse-debouncer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebodger%2Fuse-debouncer/lists"}