{"id":22542637,"url":"https://github.com/devonchurch/eggs-benedict","last_synced_at":"2026-04-17T01:31:53.210Z","repository":{"id":42897408,"uuid":"253129008","full_name":"devonChurch/eggs-benedict","owner":"devonChurch","description":"A simple utility that limits the impact of functions the demand high CPU load","archived":false,"fork":false,"pushed_at":"2023-01-07T16:44:29.000Z","size":792,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T20:41:10.951Z","etag":null,"topics":["debounce","debouncer","optimization","performance","react","reactjs","throttle","throttler"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/eager-torvalds-th3lz","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/devonChurch.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":"2020-04-05T00:58:11.000Z","updated_at":"2020-05-12T07:50:47.000Z","dependencies_parsed_at":"2023-02-07T16:32:11.161Z","dependency_job_id":null,"html_url":"https://github.com/devonChurch/eggs-benedict","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Feggs-benedict","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Feggs-benedict/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Feggs-benedict/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Feggs-benedict/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devonChurch","download_url":"https://codeload.github.com/devonChurch/eggs-benedict/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245991560,"owners_count":20706126,"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":["debounce","debouncer","optimization","performance","react","reactjs","throttle","throttler"],"created_at":"2024-12-07T13:11:49.999Z","updated_at":"2026-04-17T01:31:53.185Z","avatar_url":"https://github.com/devonChurch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eggs Benedict 🥚🥓🍞🍽\n\n## What 👋\n\nA simple utility that limits the impact of functions the demand **high CPU** load.\n\n## Why 🤷‍♀️\n\nFunctionality that demands intense CPU load can create a poor user experience as their session can hang and become unresponsive.\n\nThere are _**throttle**_ and _**debounce**_ solutions that help to alleviate the repercussions of CPU intensive UI. _Eggs Benedict_ incorporates these methodologies into a lightweight _**React**_ and _**Vanilla JS**_ abstraction.\n\n---\n\n_Eggs Benedict_ was originally designed to help with the various complex calculations associated with the [Avocado application](https://github.com/devonChurch/avocado). The library has since been enhanced into a simple developer API that can yield powerful results.\n\n![Avocado demo](https://user-images.githubusercontent.com/15273233/70855526-15556d00-1f31-11ea-839c-3c4a284a59ca.gif)\n\n## How 💡\n\nThis library uses [Request Animation Frame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to implement _**throttle**_ and _**debounce**_ solutions simultaneously. This provides the real-time updates of a _throttler_ while ensuring that the UI does not fall out of sync with a _debouncer_.\n\n![Eggs Benedict Flow](https://user-images.githubusercontent.com/15273233/78968151-05a10a80-7b58-11ea-997d-83581fe360ec.png)\n\n## Options ⚙️\n\n_Eggs Benedict_ offers some light configuration for custom _**throttle**_ and _**debounce**_ delays.\n\n```\n{\n  throttleDelay: 0, // Default.\n  debounceDelay: 100 // Default.\n}\n```\n\nTake a look at the [interactive CodeSandbox](https://codesandbox.io/s/eager-torvalds-th3lz) to see configuration examples and their correlation with different CPU loads.\n\n![eggs-benedict-options-example](https://user-images.githubusercontent.com/15273233/78968127-033eb080-7b58-11ea-9686-f6d9ed53b344.gif)\n\n## Typescript 👌\n\nYou can reference the _Eggs Benedict_ types directly in your application.\n\n```javascript\nimport { Options } from \"eggs-benedict/types\";\n```\n\nYou can also supply a typed callback as a generic to the _**React Hooks**_ and _Vanilla JS_ initializers.\n\n### React Hooks\n\n```typescript\n// prettier-ignore\nconst setLoadControlValue =\n  useLoadControl\u003c(value: string) =\u003e void\u003e(callback);\n```\n\n### Vanilla JS\n\n```typescript\n// prettier-ignore\nconst [activeLoadControl, cleanUpLoadControl] =\n  LoadControl\u003c(value: string) =\u003e void\u003e(callback);\n```\n\n## Examples 📝\n\n### React Hooks\n\n[In this example](https://codesandbox.io/s/determined-khayyam-ku303) we are using the _**React Hooks**_ import to run some CPU heavy work when the _Range_ `\u003cinput /\u003e` changes its value.\n\n```javascript\nimport React from \"react\";\nimport { useLoadControl } from \"eggs-benedict/hooks\";\n\nexport default function App() {\n  const [count, setCount] = React.useState(0);\n  const heavyCpuLoad = (value) =\u003e {\n    /**\n     * CPU HEAVY WORK HERE!\n     * - - - - - - - - - - -\n     * Maybe some complex calculations based on the Range \u003cinput /\u003e value 🤓\n     */\n    setCount(value);\n  };\n  const setLoadControlCount = useLoadControl(heavyCpuLoad);\n  const handleChange = (event) =\u003e\n    setLoadControlCount(event.currentTarget.value);\n\n  return (\n    \u003c\u003e\n      \u003cinput type=\"range\" value={count} onChange={handleChange} /\u003e\n      \u003cp\u003e{count}\u003c/p\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Vanilla JS\n\n[In this example](https://codesandbox.io/s/hidden-fast-bsvpe) we are using a _**Vanilla JS**_ implementation inside a _**React**_ `useEffect` scaffold. When the user scrolls the `window` we run a CPU heavy callback.\n\n```javascript\nimport React from \"react\";\nimport LoadControl from \"eggs-benedict\";\n\nexport default function App() {\n  const [scroll, setScroll] = React.useState(0);\n  React.useEffect(() =\u003e {\n    const heavyCpuLoad = (event) =\u003e {\n      /**\n       * CPU HEAVY WORK HERE!\n       * - - - - - - - - - - -\n       * Maybe slow DOM heavy math to move some elements around 🤓\n       */\n      setScroll(event.currentTarget.scrollY);\n    };\n    const [scrollLoadControl, cleanUpScrollLoadControl] = LoadControl(\n      heavyCpuLoad\n    );\n    window.addEventListener(\"scroll\", scrollLoadControl);\n\n    /**\n     * Remember to remove the Eggs Benedict instance when unmounting your\n     * \u003cComponent /\u003e 👍\n     */\n    return cleanUpScrollLoadControl;\n  }, []);\n  return (\n    \u003c\u003e\n      \u003cp style={{ position: \"fixed\" }}\u003e{scroll}\u003c/p\u003e\n      \u003cdiv\n        style={{\n          height: \"200vh\",\n          backgroundImage: \"linear-gradient(to bottom, #58FFC7, #2D8165)\",\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Feggs-benedict","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevonchurch%2Feggs-benedict","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Feggs-benedict/lists"}