{"id":13479106,"url":"https://github.com/DAB0mB/react-autorun","last_synced_at":"2025-03-27T09:30:43.337Z","repository":{"id":168022171,"uuid":"639699857","full_name":"DAB0mB/react-autorun","owner":"DAB0mB","description":"A macro that compiles into a dependencies array for hooks.","archived":false,"fork":false,"pushed_at":"2023-06-13T13:38:34.000Z","size":144,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T11:01:41.619Z","etag":null,"topics":["react","react-hooks"],"latest_commit_sha":null,"homepage":"","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/DAB0mB.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-12T03:09:05.000Z","updated_at":"2024-10-16T20:35:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"dcafe4f1-bc1f-42ae-8e5c-5d7bc851b1e6","html_url":"https://github.com/DAB0mB/react-autorun","commit_stats":null,"previous_names":["dab0mb/react-autorun"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Freact-autorun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Freact-autorun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Freact-autorun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Freact-autorun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DAB0mB","download_url":"https://codeload.github.com/DAB0mB/react-autorun/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245817332,"owners_count":20677268,"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":["react","react-hooks"],"created_at":"2024-07-31T16:02:09.549Z","updated_at":"2025-03-27T09:30:43.325Z","avatar_url":"https://github.com/DAB0mB.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Autorun\n\nReact Autorun is a powerful macro that simplifies dependency management for hooks in React. It provides a seamless way to specify dependencies while offering control over their behavior. With React Autorun, you can easily exclude specific objects from being included as dependencies, eliminating the need for workarounds like wrapping values with `useRef`. It is currently available as a plugin for [Babel](https://babeljs.io/) or [SWC](https://swc.rs/). For more information, refer to the [Installation and Setup](#installation-and-setup) section.\n\n## Key Features\n\n- **Automatic Dependency Tracking**: React Autorun eliminates the need to manually specify dependencies by automatically generating the dependencies array for your hooks at compile-time.\n- **Flexible Ignoring of Values**: You can mark certain values as ignored, ensuring they are not considered as dependencies during runtime.\n- **Works with Any Hook**: React Autorun decouples the dependencies' logic from the hook type, allowing you to specify dependencies for any hook, not just React's hooks.\n\n## Before and After Compilation\n\nBefore:\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { autorun } from 'react-autorun';\nimport { GameContext } from '../game/context';\nimport { createGame } from '../game/game';\nimport { GameBoard } from './game_board';\n\nexport function Blackjack() {\n  const [game, setGame] = useState(createGame);\n\n  useEffect(() =\u003e {\n    const unlistenToRestart = game.restartEvent.listen(() =\u003e {\n      setGame(createGame());\n    });\n\n    return () =\u003e {\n      unlistenToRestart();\n    };\n  }, autorun);\n\n  return (\n    \u003cGameContext.Provider value={game}\u003e\n      \u003cGameBoard /\u003e\n    \u003c/GameContext.Provider\u003e\n  );\n}\n```\n\nAfter:\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { autorun } from 'react-autorun';\nimport { GameContext } from '../game/context';\nimport { createGame } from '../game/game';\nimport { GameBoard } from './game_board';\n\nexport function Blackjack() {\n  const [game, setGame] = useState(createGame);\n\n  useEffect(() =\u003e {\n    const unlistenToRestart = game.restartEvent.listen(() =\u003e {\n      setGame(createGame());\n    });\n\n    return () =\u003e {\n      unlistenToRestart();\n    };\n  }, autorun(() =\u003e [game?.restartEvent, game?.restartEvent?.listen]));\n\n  return (\n    \u003cGameContext.Provider value={game}\u003e\n      \u003cGameBoard /\u003e\n    \u003c/GameContext.Provider\u003e\n  );\n}\n```\n\nThe \"after\" code showcases how React Autorun can transform the dependencies array for hooks, providing a more streamlined and intuitive approach.\n\n## Ignoring Values with `autorun.ignore`\n\nReact Autorun provides a way to ignore specific values from being treated as dependencies. Some React hook values, such as `useState()`, `useReducer()`, and `useRef()`, are already ignored by the compiler out of the box.\n\nHere's an example that demonstrates using `autorun.ignore()` to exclude a value from the dependencies:\n\n```tsx\nimport { useCallback, useInsertionEffect, useRef } from 'react';\nimport { autorun } from 'react-autorun';\n\nexport function useCaller\u003cFn extends (...args: any) =\u003e any\u003e(fn: Fn) {\n  const ref = useRef(callerRefInit as Fn);\n\n  useInsertionEffect(() =\u003e {\n    ref.current = fn;\n  }, autorun);\n\n  const caller = useCallback((...args: any) =\u003e {\n    return ref.current(...args);\n  }, autorun) as Fn;\n\n  // `useCaller()` return value is now ignored by hooks\n  return autorun.ignore(caller);\n}\n\nfunction callerRefInit() {\n  throw new Error('Function not ready');\n}\n```\n\nWith this usage of `autorun.ignore`, the caller value returned by `useCaller()` will be excluded as a dependency when used within other hooks. This ensures that the hook won't be invalidated if, for some particular reason, the caller reference has changed.\n\n## Installation and Setup\n\nTo install React Autorun, use npm:\n\n```\nnpm install react-autorun\n```\n\nNext, load the plugin using Babel or SWC.\n\n### Babel Setup\n\nIf you use Babel, edit your `.babelrc` file to include `react-autorun/plugin/babel`:\n\n```json\n{\n  \"plugins\": [\"react-autorun/plugin/babel\"]\n}\n```\n\n### SWC Setup\n\nIf you use SWC with Next.js, edit your `next.config.js` file to include `react-autorun/plugin/swc`:\n\n```js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  experimental: {\n    swcPlugins: [\n      ['react-autorun/plugin/swc']\n    ]\n  }\n}\n\nmodule.exports = nextConfig\n```\n\nPlease note that [loading SWC plugins with Next.js is currently an experimental feature](https://nextjs.org/docs/architecture/nextjs-compiler#swc-plugins-experimental), which may lead to inconsistent results. Make sure to review the Next.js documentation for further details.\n\n## License\n\nReact Autorun is licensed under the MIT license. See the [LICENSE](./LICENSE) file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDAB0mB%2Freact-autorun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDAB0mB%2Freact-autorun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDAB0mB%2Freact-autorun/lists"}