\n\n\nThis module is still under development. A real documentation website is coming.\n\n# Main hooks\n\n## `useConstCallback`\n\nBelieve it or not [there is no valid reason to require user to pass in a dependency\narray to `useCallback`](https://stackoverflow.com/questions/65890278/why-cant-usecallback-always-return-the-same-ref).\n\n
\n \n
\n\n[Demo playground](https://stackblitz.com/edit/react-ts-fyrwng?file=index.tsx) to show you why it matters.\n\n## `useCallbackFactory`\n\nTo avoid re-rendering every list item component when the parent re-renders.\n\n```tsx\n//Without powerhook:\n\ntodos.map(todo => onClick(todo, a, b)} />);\n\n//With:\n\nimport { useCallbackFactory } from \"powerhooks/useCallbackFactory\";\n\n//...\n\nconst onClickFactory = useCallbackFactory(([todo]: [string], [a, b]: [string, number]) =>\n onClick(todo, a, b)\n);\n\ntodos.map(todo => );\n```\n\nLet's assume `` uses `React.memo`, in the example without powerhooks,\nevery render of the parent the reference of `onComplete` changes. \n`useCallbackFactory` on the other hand always returns the same function for a given `todo: string`.\n\n## `useGlobalState`\n\nCreate global state persistent across reloads that is accessible through out the entire app, and this without involving a provider.\n\nNOTE: It makes uses of TypeScript's [template literal types](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#template-literal-types) to return\n`useIsDarkModeEnabled` based on the `name` parameter (`\"isDarkModeEnabled\"`). \nHow cool is that ?!\n\n`useIsDarkModeEnabled.ts`\n\n```tsx\nimport { createUseGlobalState } from \"powerhooks/useGlobalState\";\n\nexport const { useIsDarkModeEnabled, evtIsDarkModeEnabled } = createUseGlobalState({\n name: \"isDarkModeEnabled\",\n initialState: window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches,\n doPersistAcrossReloads: true\n});\n```\n\n`MyComponent.tsx`\n\n```tsx\nimport { useIsDarkModeEnabled } from \"./useIsDarkModeEnabled\";\n\nexport function MyComponent(){\n\n const { isDarkModeEnabled, setIsDarkModeEnabled }= useIsDarkModeEnabled();\n\n return (\n
\n
The dark mode is currently: {isDarkModeEnabled?\"enabled\":\"disabled\"}
\n
\n \n );\n}\n```\n\nWARNING: Not yet compatible with SSR\n\n# Used by\n\n- [Onyxia-ui](https://github.com/InseeFrLab/onyxia-ui)\n- [Onyxia](https://github.com/InseeFrLab/onyxia-web)\n- [Keycloakify](https://github.com/InseeFrLab/keycloakify)\n\n# Development\n\nStart the test SPA\n\n```\nnpx tsc -w\nyarn start_spa\n```\n","readmeFilename":"README.md"}
![](\"https://github.com/garronej/powerhooks/workflows/ci/badge.svg?branch=master\"){kind=icon}
\n \n \n ![](\"https://img.shields.io/npm/dw/powerhooks\")
\n \n \n ![](\"https://img.shields.io/npm/l/powerhooks\")
\n \n![](\"https://www.powerhooks.dev/static/media/useConstCallback.07317f8f.png\")
\n