{"id":19281567,"url":"https://github.com/simbathesailor/use-effect-x","last_synced_at":"2025-04-22T01:31:04.014Z","repository":{"id":57388016,"uuid":"287260142","full_name":"simbathesailor/use-effect-x","owner":"simbathesailor","description":"🌟 useEffectX 🌟  : An alternative and drop-in replacement for useEffect which provide previous values of dependency items out of the box.","archived":false,"fork":false,"pushed_at":"2020-08-17T16:57:18.000Z","size":161,"stargazers_count":15,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T17:53:34.876Z","etag":null,"topics":["react","useeffect"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/usexeffect-7ougo?file=/src/App.tsx","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/simbathesailor.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-08-13T11:23:13.000Z","updated_at":"2024-02-09T19:03:16.000Z","dependencies_parsed_at":"2022-09-11T10:11:20.474Z","dependency_job_id":null,"html_url":"https://github.com/simbathesailor/use-effect-x","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/simbathesailor%2Fuse-effect-x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-effect-x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-effect-x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-effect-x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simbathesailor","download_url":"https://codeload.github.com/simbathesailor/use-effect-x/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250161965,"owners_count":21385014,"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","useeffect"],"created_at":"2024-11-09T21:23:22.475Z","updated_at":"2025-04-22T01:31:03.702Z","avatar_url":"https://github.com/simbathesailor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-effect-x\n\n\u003ch2  align=\"center\"\u003eAn alternative to useEffect which provide extra info to work with updates\u003c/h2\u003e\n\n---\n\n### Why it is needed ?\n\nMost of the times we need to respond to updates in our components, where we need to compare previous values and current values. Remember we had the same thing with componentDidUpdate in class based components earlier. useEffect today are not capable to do so out of the box. you need to put in extra effort to get the previous and current values.\n\nWe will focus on the function components now, as they are the most prominent way of developing components today.\n\nIn functional components we typically make use of usePrevious custom hooks. That definetly works. But, you need to do extra work of adding usePrevious hooks for individual items in useEffect dependency.\n\nWhat if we have the access of previous and new values in useEffect callback also, so that we dont have to do that extra work of writing usePrevious hooks.\n\n---\n\nSo there you go, I try to solve the problem using useEffect alternative which provides extra info about the dependencies , tells you what changed, previous values, current values and first run for the starters\n\n## Install\n\nIf you use yarn. Run\n\n```sh\n\nyarn add use-effect-x\n\n```\n\nIf you use npm. Run\n\n```\n\nnpm i use-effect-x\n\n```\n\n## Usage\n\n```jsx\nimport { useEffectX } from 'use-effect-x';\n\nexport default function App() {\n  const [countA, setCountA] = React.useState(0);\n  const [countB, setCountB] = React.useState(0);\n\n  useEffectX(\n    ({ changedItem: [changeObjcountA, changeObjcountB] }) =\u003e {\n      // Here you have complete access to what changed\n\n      //changeObjcountA contains\n      // {\n      // previous // previous value\n      // next, // current value\n      // changed: // has changed\n      // isFirstRun: // is running for the first time\n      // }\n\n      console.log('changed Item', changeObjcountA, changeObjcountB);\n\n      // As changedItem is an array, you can access via in\n      // console.log(\n      //   `count ${changedItem[0]?.changed ? 'changed' : 'not changed'} from ${\n      //     changedItem[0]?.previous\n      //   } to ${changedItem[0]?.next}`\n      // );\n    },\n    [countA, countB]\n  );\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      countA -\u003e {countA}\n      countB -\u003e {countB}\n      \u003cbutton\n        onClick={() =\u003e {\n          setCountA(countA + 1);\n        }}\n      \u003e\n        Change count A\n      \u003c/button\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          setCountB(countB + 1);\n        }}\n      \u003e\n        Change count B\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## When not needed the arguments, you can use it exactly same as useEffect\n\n```jsx\nuseEffectX(() =\u003e {}, [countA, countB]);\n\nuseEffectX(() =\u003e {});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimbathesailor%2Fuse-effect-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimbathesailor%2Fuse-effect-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimbathesailor%2Fuse-effect-x/lists"}