{"id":42287587,"url":"https://github.com/valcol/react-use-scheduler","last_synced_at":"2026-01-27T09:23:04.649Z","repository":{"id":65419938,"uuid":"546128149","full_name":"valcol/react-use-scheduler","owner":"valcol","description":"A React hook that allows you to schedule tasks and automatically orchestrate them based on your component lifecycle and visibility.","archived":false,"fork":false,"pushed_at":"2023-01-04T13:01:04.000Z","size":151,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T08:35:48.259Z","etag":null,"topics":["hook","inp","performance","react","scheduler","scheduling","task-management","task-scheduler","webperformance"],"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/valcol.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":"2022-10-05T15:15:24.000Z","updated_at":"2024-01-16T23:58:54.000Z","dependencies_parsed_at":"2023-02-02T13:17:23.037Z","dependency_job_id":null,"html_url":"https://github.com/valcol/react-use-scheduler","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/valcol/react-use-scheduler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valcol%2Freact-use-scheduler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valcol%2Freact-use-scheduler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valcol%2Freact-use-scheduler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valcol%2Freact-use-scheduler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valcol","download_url":"https://codeload.github.com/valcol/react-use-scheduler/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valcol%2Freact-use-scheduler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28810483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hook","inp","performance","react","scheduler","scheduling","task-management","task-scheduler","webperformance"],"created_at":"2026-01-27T09:23:03.936Z","updated_at":"2026-01-27T09:23:04.641Z","avatar_url":"https://github.com/valcol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    🧵\n    \u003cbr /\u003e\n    react-use-scheduler\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n  \u003c/h1\u003e\n  \u003csup\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-use-scheduler\"\u003e\n       \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/valcol/react-use-scheduler/main.yml\" alt=\"npm package\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-use-scheduler\"\u003e\n       \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-use-scheduler\" alt=\"dep size\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-use-scheduler\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/react-use-scheduler\" alt=\"version\" /\u003e\n    \u003c/a\u003e\n    \u003cbr /\u003e\n  \u003c/sup\u003e\n   \u003ch3\u003eA \u003ca href=\"https://reactjs.org/docs/hooks-intro.html\"\u003eReact hook\u003c/a\u003e that allows you to \u003ca href=\"https://web.dev/optimize-long-tasks/#a-dedicated-scheduler-api\"\u003eschedule tasks\u003c/a\u003e and automatically orchestrate them based on your component lifecycle and visibility.\u003ch3\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cpre\u003enpm i \u003ca href=\"https://www.npmjs.com/package/react-use-scheduler\"\u003ereact-use-scheduler\u003c/a\u003e\u003c/pre\u003e\n  \u003cpre\u003eyarn add \u003ca href=\"https://www.npmjs.com/package/react-use-scheduler\"\u003ereact-use-scheduler\u003c/a\u003e\u003c/pre\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\n`react-use-scheduler` helps you manage and prioritize tasks using the browser [Scheduler API](https://developer.mozilla.org/en-US/docs/Web/API/Scheduler). This allows you to prioritize the tasks that are the most important for a good user experience, making your page more responsive, while still allowing less critical work to be done. If the component associated with the tasks is no longer visible on the screen, the priorities of current and incoming tasks will be automatically lowered. If the component becomes visible again, the task priorities will be restored. Additionally, any tasks that are scheduled will be cancelled if the component is unmounted.\n\n# How to use\n\n```js\n// Use object destructing, so you don't need to remember the exact order\nconst { postTask, ref } = useScheduler(options);\n\n// Or array destructing if you want to customize the field names\nconst [postTask, ref] = useScheduler(options);\n```\n\n\u003cbr /\u003e\n\n\u003e **⚠️** `react-use-scheduler` use the [Scheduler API](https://developer.mozilla.org/en-US/docs/Web/API/Scheduler),\n\u003e make sure to install the [polyfill](https://github.com/GoogleChromeLabs/scheduler-polyfill) if needed.\n\n\u003cbr /\u003e\n\nThe `useScheduler` hook returns a `postTask` function and a `ref` that you can pass to a component to bind the tasks scheduled with `postTask` to the component lifecycle and visibility. You can pass a default `priority` as an option if you want.\n\n```js\nimport React, { useState } from \"react\";\nimport useScheduler, { TASK_PRIORITIES } from \"react-use-scheduler\";\n//...\n\nconst Component = () =\u003e {\n  const { postTask, ref } = useScheduler();\n  const [hasBeenClicked, setHasBeenClicked] = useState(false);\n\n  const onClick = () =\u003e {\n    setHasBeenClicked(true);\n    postTask(someLongTask, {\n      priority: TASK_PRIORITIES.userVisible,\n    });\n    postTask(() =\u003e sendTracking(\"click\"), {\n      priority: TASK_PRIORITIES.background,\n      detached: true,\n    });\n  };\n\n  return (\n    \u003cbutton onClick={onClick} ref={ref}\u003e\n      {hasBeenClicked ? \"Clicked!\" : \"Click Me!\"}\n    \u003c/button\u003e\n  );\n};\n```\n\n# API\n\n## Options\n\nProvide these as the options argument to the `useInView` hook, ex:\n\n```js\nconst { postTask, ref } = useScheduler({\n  defaultPriority: TASK_PRIORITIES.userVisible,\n});\n```\n\n| Name         | Type     | Default                        |     |\n| ------------ | -------- | ------------------------------ | --- |\n| **priority** | `string` | `TASK_PRIORITIES.userBlocking` |\n\nOne of:\n\n- `TASK_PRIORITIES.background` for the lowest priority tasks.\n- `TASK_PRIORITIES.userVisible` for medium priority tasks. This is the default if no priority is set.\n- `TASK_PRIORITIES.userBlocking` for critical tasks that need to run at high priority.\n\n## Return\n\n### `postTask`\n\n```js\npostTask(fn, options);\n```\n\n**Options**\n\n| Name             | Type      | Default                        | Description                                                                                                                                                                     |\n| ---------------- | --------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **priority**     | `string`  | `TASK_PRIORITIES.userBlocking` | Override the `priority` set in the options argument to the `useInView` hook.                                                                                                    |\n| **detached**     | `boolean` | `false`                        | If set to `true`, the task will not be affected by the component's lifecycle. The priority will stay the same and the task will not be cancelled if the component is unmounted. |\n| **throwOnAbort** | `boolean` | `false`                        | If set to `true` an error will be throw if the task is aborted before completion                                                                                                |\n\n### `ref`\n\n```js\n\u003cComponent ref={ref} /\u003e\n```\n\nYou can pass the `ref` to a component to bind the tasks scheduled with `postTask` to the component lifecycle and visibility.\n\n- If the component exits the viewport, all the incomming and current task priorities will be set to `background`.\n- If the component re-enters the viewport, all task priorities will be restored to their initial values.\n- If the component is unmounted, all tasks will be aborted.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalcol%2Freact-use-scheduler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalcol%2Freact-use-scheduler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalcol%2Freact-use-scheduler/lists"}