{"_id":"granular-hooks","_rev":"4-bf0d0958f06530d128b2ec797e3e59a3","name":"granular-hooks","dist-tags":{"pre":"0.0.2","latest":"1.1.0"},"versions":{"0.0.1":{"name":"granular-hooks","version":"0.0.1","description":"Good old React hooks, with added granularity","main":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/gfox1984/granular-hooks.git"},"author":{"name":"Guillaume Renard"},"license":"MIT","keywords":["react","utils","hook","hooks","granular","useEffect","useGranularEffect"],"homepage":"https://github.com/gfox1984/granular-hooks","bugs":{"url":"https://github.com/gfox1984/granular-hooks/issues"},"scripts":{"build":"tsc","test":"jest --passWithNoTests","type-check":"tsc --pretty --noEmit","lint":"eslint . --ext .ts","format":"yarn prettier --write .","prepare":"tsc && husky install"},"lint-staged":{"*.@(ts|tsx)":["tsc --pretty --noEmit","eslint --fix","prettier --write --ignore-unknown"],"!*.@(ts|tsx)":"prettier --write --ignore-unknown"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@babel/core":"^7.16.12","@babel/preset-env":"^7.16.11","@babel/preset-typescript":"^7.16.7","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.0","@types/react":"^17.0.38","@typescript-eslint/eslint-plugin":"^5.10.1","@typescript-eslint/parser":"^5.10.1","add":"^2.0.6","babel-jest":"^27.4.6","eslint":"^8.8.0","eslint-config-prettier":"^8.3.0","eslint-plugin-react":"^7.28.0","husky":"^7.0.4","jest":"^27.4.7","lint-staged":"^12.3.2","prettier":"2.5.1","react":"^17.0.2","react-test-renderer":"^17.0.2","ts-node":"^10.4.0","typescript":"^4.5.5"},"gitHead":"74afa1c9812e55e996c55917b6827dcadd6247f9","_id":"granular-hooks@0.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-nLQlXdifeKRfbmC1QIKuM6F3xX7aia9UylOhhQ/dYP/1m+mMrnj/9kee0VnBxBZgELiIR9P7fCZAwpFseAaS8w==","shasum":"102469e7c080b5f850bf0e6b7593945cedfbc748","tarball":"https://registry.npmjs.org/granular-hooks/-/granular-hooks-0.0.1.tgz","fileCount":3,"unpackedSize":6597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+TgACRA9TVsSAnZWagAAtEMP/jR4u2YAuWcm75fdIXrH\nFcB3msjJAs5Mmfbl71eEfBLQYzKX9mSVR+8nVUfUYC5AImVASbI8xPDVJ4Mi\nYCIK/9A+HP1/piJFxWcBy1aj05hSyADc6fcd6SQn7XjbfbRxd0j3BrIpxhmN\nhuMU85PvpKHNS+RY2W4DhAAtzFK3VSW3JIv+9A9YjlQl5r34bKT9C84cqarB\nZ9lpVZWFH1q/ffKkluS4EgauTLsPZGolwrbx9i1dZHv5wejOjVP5fCRNP/1n\nq2+VHQtTcPBE+S88QL9GBI/0QO2q6SSCixOwKF+FnZTNURgFuc5sgWk6T+3h\nrDbEPWvJ0b3t96VBKNjhGHHh7tgCStvFo9zjb4xCvXhB+mquOZdASVGsWbPf\ntVeJRON8ogvookL60NOKPkNIKziSK6PHan1C4k8VTLGGuvj0AOQL5J6ZX8jb\nianarVMxxN2UO7dkmAbLGZriy61FIW+GJAfqWJuLTZS7tUMUaqvRzwvQnJpl\ndf2GF6usHknvcSaTol7x/ErjFzMLfBghT1rCrxakkoqKqSeRdt3jGrLKhEm8\nWV0hBoNpfG2HWx/5WkeL6lyrLubNr5h5MVsQTxRrA8hpOZS7BWBhpwUHtELo\n4IAimY6DB+vLPCMCBud7dv0ZlCdovfGj+41TIt/bs2e0XOb75jyN9KkVObVB\nBJBO\r\n=2Yfj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDchxXXwk8ck7QdNFmxs4DiPupTb+MlZhAtidLCWgth5wIgEHU0R7XBiTY0PpQkr53/wqzXkBYtRR18DrYTxKjoId4="}]},"_npmUser":{"name":"gfox1984","email":"guillaumefox@hotmail.com"},"directories":{},"maintainers":[{"name":"gfox1984","email":"guillaumefox@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/granular-hooks_0.0.1_1643722752771_0.5926842437840416"},"_hasShrinkwrap":false},"0.0.2":{"name":"granular-hooks","version":"0.0.2","description":"The React hooks you know, with added granularity","main":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"https://github.com/gfox1984/granular-hooks.git"},"author":{"name":"Guillaume Renard"},"license":"MIT","keywords":["react","utils","hook","hooks","granular","useEffect","useGranularEffect"],"homepage":"https://github.com/gfox1984/granular-hooks","bugs":{"url":"https://github.com/gfox1984/granular-hooks/issues"},"scripts":{"build":"tsc","test":"jest --passWithNoTests","type-check":"tsc --pretty --noEmit","lint":"eslint . --ext .ts","format":"yarn prettier --write .","prepare":"tsc && husky install"},"lint-staged":{"*.@(ts|tsx)":["tsc --pretty --noEmit","eslint --fix","prettier --write --ignore-unknown"],"!*.@(ts|tsx)":"prettier --write --ignore-unknown"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@babel/core":"^7.16.12","@babel/preset-env":"^7.16.11","@babel/preset-typescript":"^7.16.7","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.0","@types/react":"^17.0.38","@typescript-eslint/eslint-plugin":"^5.10.1","@typescript-eslint/parser":"^5.10.1","add":"^2.0.6","babel-jest":"^27.4.6","eslint":"^8.8.0","eslint-config-prettier":"^8.3.0","eslint-plugin-react":"^7.28.0","husky":"^7.0.4","jest":"^27.4.7","lint-staged":"^12.3.2","prettier":"2.5.1","react":"^17.0.2","react-test-renderer":"^17.0.2","ts-node":"^10.4.0","typescript":"^4.5.5"},"readmeFilename":"README.md","readme":"# granular-hooks\n\nThe [React hooks](https://reactjs.org/docs/hooks-intro.html) you know, with added granularity.\n\n## The problem\n\nWho hasn't been in the situation where s/he needs an effect to run\nonly when _some_ of its dependencies have changed? Take this code for instance:\n\n```typescript\nimport { useEffect } from \"react\";\n\nuseEffect(() => {\n  if (condition) console.log(\"condition is true! value is\", value);\n  else console.log(\"condition is false! value is\", value);\n}, [value, condition]);\n```\n\nHere, the effect prints to the console each time `value` or `condition` change. You cannot print to the console ONLY when `value` changes because `useEffect` requires that [all values used by the effect are passed in the array of dependencies](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect).\n\n## The solution\n\nWith minimal effort, `useGranularEffect` allows you to splits your array of dependencies into two: primary dependencies and secondaries dependencies.\n\n`useGranularEffect` guarantees that:\n\n- the effect only runs when the primary dependencies change\n- the cleanup function (if any) only runs when the primary dependencies change\n- when the effect runs, both primary and secondary dependencies are up-to-date\n\nThe example above can now be changed to:\n\n```typescript\nimport { useGranularEffect } from \"granular-hooks\";\n\nuseGranularEffect(\n  () => {\n    if (condition) console.log(\"condition is true! value is\", value);\n    else console.log(\"condition is false! value is\", value);\n  },\n  [value],\n  [condition]\n);\n```\n\nNow the code only prints to the console when `value` changes.\n\n## Installation\n\n```\nnpm install granular-hooks\n```\n\nor\n\n```\nyarn add granular-hooks\n```\n\n## Usage\n\n```typescript\nimport { useGranularEffect } from \"granular-hooks\";\n\nuseGranularEffect(\n  () => {\n    // the effect function, use your dependencies here\n    // dep1, dep2, dep3, dep4,...\n\n    // (optional) return a cleanup function\n    return () => {\n      /* cleanup*/\n    };\n  },\n  [dep1, dep2], // primary dependencies (runs when they change)\n  [dep3, dep4] // secondary dependencies (does not run when they change)\n);\n```\n\nThe only difference with `useEffect` is that the array of dependencies is split into two (the primary dependencies and the secondary dependencies). In fact, `useGranularEffect` uses `useEffect` under the hood, thus the similarities.\n\nSee the [React documentation for `useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) for more information regarding the effect function, the optional cleanup function and dependencies.\n\nAlso check the general [rules of hooks](https://reactjs.org/docs/hooks-rules.html).\n\n## What's next?\n\nBelow are the features we're working on:\n\n- [ ] Why stop with granular effect? granular memos and callback are calling too! Stay tuned.\n- [ ] React hooks have a great [ESLint plugin](https://reactjs.org/docs/hooks-rules.html#eslint-plugin) that makes sure you don't forget to list dependencies when calling them. `granular-hooks` are still missing such tools.\n\n## FAQ\n\n### Can I leave either the array of primary or secondary dependencies empty?\n\nYou could but that would defeat the purpose of the hook. You might as well call `useEffect` directly.\n\n### Why use `useGranularEffect` when I can just omit some dependencies in `useEffect`?\n\nWhile you could technically do so, it would violate the rules exposed in [conditionally firing an effect](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect):\n\n> make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders.\n","licenseText":"MIT License\n\nCopyright (c) 2022 Guillaume RENARD\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"granular-hooks@0.0.2","dist":{"shasum":"082d1658dbc0d8df9132c6a3a7e3d468209e156c","integrity":"sha512-LOABX6CQ7DbHkhFwcz+h7BPRVpANMu+rbisJAqdeDZOlcggQpTn4oX8FpKcac1AV6Aa2yjr9aSL7p4m/5BJlzQ==","tarball":"https://registry.npmjs.org/granular-hooks/-/granular-hooks-0.0.2.tgz","fileCount":10,"unpackedSize":7848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+TyNCRA9TVsSAnZWagAAyA4P/26fknbDsLj2Pxgn8NrE\nfxOovs3KnqHY9U/L3AtDAxsPCyDWWiwxDsaiYcE/dWon2okiC5LN6PJId2nf\nfDgWL+vTDeGc3EzZe0AYn8ZEU3kPNReZV/uXjQYUNoZlIErBWx35unEjleXO\nJskXnCGxMlhgHvUSqI46BUql5cdu++Kts2NqCR+o5SbBvoIdfUV5/3tz4TVn\nBMnlONgFdnK4qHbroh8JDlx1Cx4P678OfGh7Sk8kcmS5vV/oZvK05HB24TLU\nUxcEJjj3LhSOl5AkM6wzR983CXGbpYy+aqr0TLOjiljb2Hc+1EWVK7zSdp8e\n589I9/zM2F6j+Nn4yqJYnOMFqAc9zJ5EZ/RlNgGViDq1Zesr7WhcwBBl2zRh\nZVf/gZhE19ulZtqD75kUJSQIQ+BIXhLpgPnzQUdrmUKYl3sgc0tMVOHsBdeA\neMDR3Hp4Ar4J8mgehDQsYJa/C893V6p4G2/EcaLCoMarCENz3DWoArw7vqHq\n7A2QzIIeNEYirbeDimu7GFaX5oUAdCmVJJNqAqCIHcZFlzXU2yGk6Kzwook5\nNXF9JpADVmv4jG+84n66yVKsagE6vPCz7q/oxRcnCyoI341LNthyHz3A+ifM\nCGDvjhl8pdgZSX0ILxGDoPjwbkbryUetFGG8E3MI1iSNpibXmHvWbqdAlyCP\n0/p4\r\n=veN6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGfrYYueMUSt1Dpwdg9bM2gTwewuH9j+afqxWE9D7y9AIhAMj8+lcA0F5F5ryBUewFzQ7z/kzIIoSnoV4XqAcM5nv9"}]},"_npmUser":{"name":"gfox1984","email":"guillaumefox@hotmail.com"},"directories":{},"maintainers":[{"name":"gfox1984","email":"guillaumefox@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/granular-hooks_0.0.2_1643723917479_0.4458639376565241"},"_hasShrinkwrap":false},"1.0.0":{"name":"granular-hooks","version":"1.0.0","description":"The React hooks you know, with added granularity","main":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"https://github.com/gfox1984/granular-hooks.git"},"author":{"name":"Guillaume Renard"},"license":"MIT","keywords":["react","utils","hook","hooks","granular","useEffect","useGranularEffect"],"homepage":"https://github.com/gfox1984/granular-hooks","bugs":{"url":"https://github.com/gfox1984/granular-hooks/issues"},"scripts":{"build":"tsc","test":"jest --passWithNoTests","type-check":"tsc --pretty --noEmit","lint":"eslint . --ext .ts","format":"yarn prettier --write .","prepare":"tsc && husky install"},"lint-staged":{"*.@(ts|tsx)":["tsc --pretty --noEmit","eslint --fix","prettier --write --ignore-unknown"],"!*.@(ts|tsx)":"prettier --write --ignore-unknown"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@babel/core":"^7.16.12","@babel/preset-env":"^7.16.11","@babel/preset-typescript":"^7.16.7","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.0","@types/react":"^17.0.38","@typescript-eslint/eslint-plugin":"^5.10.1","@typescript-eslint/parser":"^5.10.1","add":"^2.0.6","babel-jest":"^27.4.6","eslint":"^8.8.0","eslint-config-prettier":"^8.3.0","eslint-plugin-react":"^7.28.0","husky":"^7.0.4","jest":"^27.4.7","lint-staged":"^12.3.2","prettier":"2.5.1","react":"^17.0.2","react-test-renderer":"^17.0.2","ts-node":"^10.4.0","typescript":"^4.5.5"},"licenseText":"MIT License\n\nCopyright (c) 2022 Guillaume RENARD\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"granular-hooks@1.0.0","dist":{"shasum":"dbd9b1d9cee0f8744e79da2ff6714bf0d8240146","integrity":"sha512-b9T+8VKLktebegDGQTEKSFkB3WPRuthh8EQNNncdFkjgMTNhvQTHCnx8kpW/t/aQoowbk+K12Pmn+67h0OqDrg==","tarball":"https://registry.npmjs.org/granular-hooks/-/granular-hooks-1.0.0.tgz","fileCount":10,"unpackedSize":7848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+UDWCRA9TVsSAnZWagAA3rwP/ivvJ2PFIyq5tgThm0Fz\nq88hzCo2FNQdqvf00DCYDIj6OnmC9LcBa65NbD0Ex5O1jRNfg3fYoP5L9ucn\nmuN/MFPB0yDZLaIXKaLm5WBjOyT6IN1ERyeNtEptGW/zMR/c6GfQdPqMffxY\n3ly+jbNYVQB7ol5yPMHD+6+e/10TZjyF/RuGY8B6j4gVFI9E13JNn+95k/t9\n66pjaawdNx3upaYHZpHAfHkwRuZI6MDo4StESkWPEtrx+539SFvKMJGGqySv\nLPlStScbClR6CcqS3e99uojQ2t2/dTefLjUsVHQByRy+5CCjCwKTQF06bMcY\nX7HJRYedE6ARJIY7TeElN/y8w4kRBYc3LIu7bHUgaZDAXwstCI3ojCmqOmsY\nQ9Iq6EjbTJf53OlRhSpqVTmoXPxsiruq9RzLbbelBCtwjD4GKQnwgRmHmtdx\nouVYoA1lKNiCZqlMKh+73Q9oNv5TYQL/64qZG9G6SbmxKo/RtPRwcaKQG1kN\nJOv3KmLhzuqRTLe4QfoVdrpRM1TH74vJzMo4mhhLSd6d/vT2z5Xqzb84v7VA\nsJ5uUgIxthyEzVvj9FaWo+YVRkGCXVzydB+2OEPhHooqWBVQ2Qx4BBtqSH+C\nJQ4Yfj5ydb1SXaqeWAGlz/G27vRQJsjceO//NnZ502NmHMLzd/USXA9a3DKe\nPlr3\r\n=7osy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXsRphXM5vzV8B+Q3f6TM7Iv6HzEcs8rsHxGO85CPHjAiEAkMPBlPuhc2Ur9PRjPVw4lKGY3CAL3+uj9R02eCreFKI="}]},"_npmUser":{"name":"gfox1984","email":"guillaumefox@hotmail.com"},"directories":{},"maintainers":[{"name":"gfox1984","email":"guillaumefox@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/granular-hooks_1.0.0_1643725014747_0.747888922188102"},"_hasShrinkwrap":false},"1.1.0":{"name":"granular-hooks","version":"1.1.0","description":"The React hooks you know, with added granularity","main":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"https://github.com/gfox1984/granular-hooks.git"},"author":{"name":"Guillaume Renard"},"license":"MIT","keywords":["react","utils","hook","hooks","granular","useEffect","useMemo","useCallback","useLayoutEffect","useGranularEffect"],"homepage":"https://github.com/gfox1984/granular-hooks","bugs":{"url":"https://github.com/gfox1984/granular-hooks/issues"},"scripts":{"build":"tsc","test":"jest --passWithNoTests","type-check":"tsc --pretty --noEmit","lint":"eslint . --ext .ts","format":"yarn prettier --write .","prepare":"tsc && husky install"},"lint-staged":{"*.@(ts|tsx)":["tsc --pretty --noEmit","eslint --fix","prettier --write --ignore-unknown"],"!*.@(ts|tsx)":"prettier --write --ignore-unknown"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@babel/core":"^7.16.12","@babel/preset-env":"^7.16.11","@babel/preset-typescript":"^7.16.7","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.0","@types/react":"^17.0.38","@typescript-eslint/eslint-plugin":"^5.10.1","@typescript-eslint/parser":"^5.10.1","add":"^2.0.6","babel-jest":"^27.4.6","eslint":"^8.8.0","eslint-config-prettier":"^8.3.0","eslint-plugin-react":"^7.28.0","husky":"^7.0.4","jest":"^27.4.7","lint-staged":"^12.3.2","prettier":"2.5.1","react":"^17.0.2","react-test-renderer":"^17.0.2","ts-node":"^10.4.0","typescript":"^4.5.5"},"licenseText":"MIT License\n\nCopyright (c) 2022 Guillaume RENARD\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"granular-hooks@1.1.0","dist":{"shasum":"d87ff7e4880f32a34f0d8bdb5bcd822a185dcd53","integrity":"sha512-GEBUwGVw+/BPYyVoLLsNXYkn/soxUTmX1u4sH43cP2GSKt0Ov0iKMmykCxuOFhUa85P+HeBWU80nBnBpRrxEAw==","tarball":"https://registry.npmjs.org/granular-hooks/-/granular-hooks-1.1.0.tgz","fileCount":18,"unpackedSize":13799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNGi/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Dg/8CjgH+ggQHPUx1WuB5xKpxLmEsPYCKEw23BxfU6HWc1vDmXD+\r\nUr/HwhoxOn7dXn67vu6fNdc76+EHyj+KGQhN1u0pMrjnRPNJCUNQvP6DCcuo\r\nrBbPROm5y5jy8TdU/OPCRuIyH/P86Fgm5B5tRd+G2NB8Be3Sm2wVobYkd2eU\r\nfvw2Nsl9BaBcp7nAq6UtgD7sG2udfYRr0IFN82i9vnhLrjn2n7zBRpKKe5l9\r\nOLMn+kJSPPPoXyfV+MoP4Z5oaoQCZ/T/mvRnzb0Z2AS1Y5XQlKf34H6Lmlff\r\nV4k6HE91s8OYy1yxYT7PvSmPakgJxYGoIsNh43qErNJX+o446r+0nMmMR4Kz\r\n2CDizw64kFnjnCeYRQ12K15EJ/YZvD/OOHkZRHJk54miDrsM7CGjEZZcqX6Q\r\nsMig9LZxrwfMkF9X8suTB3ASHBgGoXUgMFeQgHTz//6To8YtZuoVimcJJd99\r\n9y809klDhLBLVVBMyWsBCRQTmBVRCkzXkWHF93ISp7v0sbjY9KnsGnMofJCg\r\nUcrHfOlpmqVTZJ4O9v0zxdfETGSqKl/datNlhZ+3gwXyAes0pNP7N6Au5ecc\r\nnzYjiKRUNpRCudoUwyDFfxuSB0z+4eBihY0FTyH+3IMnEeMHuNEgwBq7IzEq\r\nIk1u0Cjp6fvB5HPJeD1xzmk1eKaLXl8YMgE=\r\n=yl6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD98fwCE4ZWRaOE+8yhh/hBzvBHk3AoqW/Hi3SaAz5DnAIgA7yei5W4wcbni14BJHOVYsVWdQP/VGyjP6dTlhw/DvY="}]},"_npmUser":{"name":"gfox1984","email":"guillaumefox@hotmail.com"},"directories":{},"maintainers":[{"name":"gfox1984","email":"guillaumefox@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/granular-hooks_1.1.0_1647601855042_0.31794749844134707"},"_hasShrinkwrap":false}},"time":{"created":"2022-02-01T13:39:12.770Z","0.0.1":"2022-02-01T13:39:12.933Z","modified":"2022-05-04T02:15:20.363Z","0.0.2":"2022-02-01T13:58:37.617Z","1.0.0":"2022-02-01T14:16:54.920Z","1.1.0":"2022-03-18T11:10:55.181Z"},"maintainers":[{"name":"gfox1984","email":"guillaumefox@hotmail.com"}],"description":"The React hooks you know, with added granularity","homepage":"https://github.com/gfox1984/granular-hooks","keywords":["react","utils","hook","hooks","granular","useEffect","useMemo","useCallback","useLayoutEffect","useGranularEffect"],"repository":{"type":"git","url":"https://github.com/gfox1984/granular-hooks.git"},"author":{"name":"Guillaume Renard"},"bugs":{"url":"https://github.com/gfox1984/granular-hooks/issues"},"license":"MIT","readme":"# granular-hooks\n\nThe [React hooks](https://reactjs.org/docs/hooks-intro.html) you know, with added granularity. You can [read more about this](https://medium.com/@gfox1984/a-more-granular-useeffect-9c8ca3d9f634) on Medium.\n\n## The problem\n\nWho hasn't been in the situation where s/he needs an effect to run\nonly when _some_ of its dependencies have changed? Take this code for instance:\n\n```typescript\nimport { useEffect } from \"react\";\n\nuseEffect(() => {\n  if (condition) console.log(\"condition is true! value is\", value);\n  else console.log(\"condition is false! value is\", value);\n}, [value, condition]);\n```\n\nHere, the effect prints to the console each time `value` or `condition` change. You cannot print to the console ONLY when `value` changes because `useEffect` wants that [all values used by the effect are passed in the array of dependencies](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect).\n\n## The solution\n\nWith minimal effort, `useGranularEffect` allows you to splits the array of dependencies into two: primary dependencies and secondaries dependencies.\n\n`useGranularEffect` guarantees that:\n\n- the effect only runs when the primary dependencies change\n- the cleanup function (if any) only runs when the primary dependencies change\n- when the effect runs, both primary and secondary dependencies are up-to-date\n\nThe example above can now be changed to:\n\n```typescript\nimport { useGranularEffect } from \"granular-hooks\";\n\nuseGranularEffect(\n  () => {\n    if (condition) console.log(\"condition is true! value is\", value);\n    else console.log(\"condition is false! value is\", value);\n  },\n  [value],\n  [condition]\n);\n```\n\nNow the code only prints to the console when `value` changes.\n\n## Installation\n\n```\nnpm install granular-hooks\n```\n\nor\n\n```\nyarn add granular-hooks\n```\n\n## Usage\n\n```typescript\nimport { useGranularEffect } from \"granular-hooks\";\n\nuseGranularEffect(\n  () => {\n    // the effect function, use your dependencies here\n    // dep1, dep2, dep3, dep4,...\n\n    // (optional) return a cleanup function\n    return () => {\n      /* cleanup*/\n    };\n  },\n  [dep1, dep2], // primary dependencies (runs when they change)\n  [dep3, dep4] // secondary dependencies (does not run when they change)\n);\n```\n\nThe only difference with `useEffect` is that the array of dependencies is split into two (the primary dependencies and the secondary dependencies). In fact, `useGranularEffect` uses `useEffect` under the hood, thus the similarities.\n\nSee the [React documentation for `useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) for more information regarding the effect function, the optional cleanup function and dependencies.\n\nAlso check the general [rules of hooks](https://reactjs.org/docs/hooks-rules.html).\n\n## Other hooks\n\n`granular-hooks` also supports the following hooks:\n\n- `useGranularLayoutEffect`, based on [useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)\n- `useGranularMemo`, based on [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo)\n- `useGranularCallback`, based on [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)\n\nThe hooks have the same signature as their React equivalents, except that the array of dependencies is split into two, just like with `useGranularEffect`.\n\n## What's next?\n\nBelow are the features we're working on:\n\n- [x] Why stop with granular effect? granular memos and callback are calling too! Stay tuned.\n- [ ] What if we could also use a custom dependency comparer (other than the default `Object.is`)?\n- [ ] React hooks have a great [ESLint plugin](https://reactjs.org/docs/hooks-rules.html#eslint-plugin) that makes sure you don't forget to list dependencies when calling them. `granular-hooks` are still missing such tools.\n\n## FAQ\n\n### Can I leave the primary array of dependencies empty?\n\nYou can. That means that the effect will only run once, when the component is mounted (the initial render).\n\n### Can I leave the secondary array of dependencies empty?\n\nYou could but that would defeat the purpose of the hook. You might as well call `useEffect` directly.\n\n### Why use `useGranularEffect` when I can just omit some dependencies in `useEffect`?\n\nWhile you could technically do so, it would violate the rules exposed in [conditionally firing an effect](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect):\n\n> make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders.\n\nHaving said that, it should still work as intended (see [Understanding dependencies in useEffect](https://medium.com/@gfox1984/understanding-dependencies-in-useeffect-7afd4df37c96)). `useGranularEffect` will however help you be explicit about your dependencies and it will make sure that the effect is called with an exhaustive list of dependencies, even though this is not stricly necessary _technically speaking_.\n","readmeFilename":"README.md"}