\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue isn't solved.\n- Due to the current useMutableSource limitation, a selector can't return a function. (See `02_basic_spec` wrapping setState)\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","gitHead":"cbadd4d8d0d20abdb1606048829bae1f36ecff14","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.1","_nodeVersion":"10.19.0","_npmVersion":"6.13.7","dist":{"integrity":"sha512-wIDs9RMw4oUJMm0G1EeDVvfvoWmBfh7cuJfLR9hfGQ6mgYirRTNycIlUzSmdK1PBbd2DRl31g8952LNVaHdF6w==","shasum":"4e3b161c91ae67b1606e7094eb7fcffb3bcbd7f9","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.1.tgz","fileCount":12,"unpackedSize":32336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaYb/CRA9TVsSAnZWagAAwf8P/3858SlxuFga+f1k/KTo\nGj5mVQUT9SNZC145IApUzFooTYPamtCMILlKLieeqpsjPMAbKJKwJT2SF+7i\nvwhLIW5VEVC9etDsQWXlsKFq9m7ugbmLcgZfAQDF0se5t3anMN04fCHFFexa\nXEg4s918EIijWAyqjDxTHx3HLWvcIyo5Kk3n/Uifz/xUxiq11qLnRCP+t5O4\n4JOyQTOBWSZHZ9IG4T5krS1mVnlbi+yYB1mvowEqaoBeo6ijn3Qj60sfvPn3\nOHDTBkNmmtjBkTD0jrducXIgynqYsoCEWdEWTIxZFM/RMXjRNChEy4YBlfme\nlRTrzvvMVlwVohJxa+p2kQUmb6eJzD5Hw7ZHuoROiBAJlV0O+qsIX/qByulW\nwoMhQowvJL75hy8k3aCldOHANbCiXkSJ7kQ8Iwc43kDW3ZqKOE5xNgqtgjVP\nK0zOCbzczGckcEA2rp25zmT1u7h/Qr03HeM37wAuGvTawukRb6KReOIYj3mk\nb5wqaceq2FcLeS/qlu5Eaj85pEUoXSiinJ+4D/oZeOO0QOYWu8ZhIbsmXVUl\nqEFDTwOigQRnYCC8C5TIXbhHZZcUu/r0k0Tw97Llm3PrQo/AQjxrRpuuoGws\nfPlBP183MT6M/EIRZoqbEypGobz16NmU+hNkS8OW3OBGQG37h1jDQpOWRPxB\n6UZV\r\n=yjx/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7OadXXOttqcuVopNXFgQ1eUQRh/rLk4jct0S8A9/M0AiEAoZcZbM17Qum8+3IqTuy8uEAzl9IdjoHKPKQVAzyHyiU="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.1_1583974142319_0.20015709106363921"},"_hasShrinkwrap":false},"2.0.0-alpha.2":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.2","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.js","module":"./dist/index.esm.js","browser":"./dist/index.umd.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build --format cjs,es,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^9.5.0","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-dom":"^16.9.5","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^2.23.0","@typescript-eslint/parser":"^2.23.0","documentation":"^12.1.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-plugin-import":"^2.20.1","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^2.5.0","html-webpack-plugin":"^3.2.0","jest":"^25.1.0","microbundle":"^0.12.0-next.8","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^25.2.1","ts-loader":"^6.2.1","typescript":"^3.8.3","webpack":"^4.42.0","webpack-cli":"^3.3.11","webpack-dev-server":"^3.10.3"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"readme":"# use-context-selector\n\n[](https://travis-ci.com/dai-shi/use-context-selector)\n[](https://badge.fury.io/js/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n### wrapCallbackWithPriority\n\nA utility function to wrap a callback function with higher priority\n\nUse this for a callback that will change a value,\nwhich will be fed into context provider.\n\n#### Parameters\n\n- `callback` **Callback** \n\n#### Examples\n\n```javascript\nimport { wrapCallbackWithPriority } from 'use-context-selector';\n\nconst wrappedCallback = wrapCallbackWithPriority(callback);\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue isn't solved.\n- Due to the current useMutableSource limitation, a selector can't return a function. (See `02_basic_spec` wrapping setState)\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","gitHead":"4adef152b3109e30b681b2846192caf9c1d2923b","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.3","dist":{"integrity":"sha512-htOUhhZ0Vuhe6jBbTGY3OTMuBEsy4atiGPUflUvDCxMXv3v8RUGjg2gOCexiK6ZwFgKhct2oxzOE9jcDXGdozQ==","shasum":"859f38e0d4e974afc34940b4a36793257c999fc2","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.2.tgz","fileCount":12,"unpackedSize":40202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeVmSCRA9TVsSAnZWagAAeKEP/i6bYsh6qE1jKLEng/Br\nl1fQFTgs0x5B3pgtCIDo5xOh3Sz+VTwrajCnKV8ydy4cFm4N1S5IfBYU9QR4\nAJDwRgpA/Y+q37zS5apgI+kkoLqOG2ssBkCnlMawalP1P7GyaFxHGxZjqXKg\nLj+Ms6B3SqzwaNvdYjPV6IdIk/1JpgBbN9XhEgM89GFLZzHVkVgtItmTx60Y\nC59Ai6117IjMgGbHU9V2F/EUWvkIJi9TBsz1mPk6WYYvFBsSEc1fNQO2YqdS\n/9xwd4RQx7IGb40qZoVOl342Jw7Mm5gIPpn6U5f1WBU7Vb1k4mUb7j+UOCDy\nL4zI40/PtDeq456BYspnRuwSiuRnMo1SglBx9rwXJhFatJqqMP9PGL1FV5rW\njwn0pixCFnPE9UzK3kHc7bUPg+2u2hXsPdf6X1LnJo2PyIh4J42kTanc6JnS\nyw9CiY/OI9q/gPiQwds4Ag5KJ604Osp6Bs7qwn1PdIRUkSdxPJeW0eXKp7fX\nlbBKpoJoCPO7RtgaA1JttX7tZevvxDU1YcRkmeFIijV6kdCgFrzyu/VpldLt\n25lwdf2WGzPWmtZmY6zUHw+i2Des2JzOTWtlOA+/E/CkmXhTieGQ28zXUvQy\nVIDWi/8HqpGn6i69w9pIACDYkl0E7MMZg0cw9Aiv+kVCDWWg+eQeZodD/Vna\nB0GO\r\n=KWmg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbF57ihMGODn5AF738EOY/Is2nNe3yVQWwEF2gl80cQAiEAiD/3/PO6InW/C6+ZU8cwh0eiCgY1YAAxq6c8Rcv/bWs="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.2_1585011089743_0.9697349103399702"},"_hasShrinkwrap":false},"2.0.0-alpha.3":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.3","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.js","module":"./dist/index.esm.js","browser":"./dist/index.umd.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build --format cjs,es,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^9.5.0","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-dom":"^16.9.5","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^2.23.0","@typescript-eslint/parser":"^2.23.0","documentation":"^12.1.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-plugin-import":"^2.20.1","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^2.5.0","html-webpack-plugin":"^3.2.0","jest":"^25.1.0","microbundle":"^0.12.0-next.8","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^25.2.1","ts-loader":"^6.2.1","typescript":"^3.8.3","webpack":"^4.42.0","webpack-cli":"^3.3.11","webpack-dev-server":"^3.10.3"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"readme":"# use-context-selector\n\n[](https://travis-ci.com/dai-shi/use-context-selector)\n[](https://badge.fury.io/js/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n### wrapCallbackWithPriority\n\nA utility function to wrap a callback function with higher priority\n\nUse this for a callback that will change a value,\nwhich will be fed into context provider.\n\n#### Parameters\n\n- `callback` **Callback** \n\n#### Examples\n\n```javascript\nimport { wrapCallbackWithPriority } from 'use-context-selector';\n\nconst wrappedCallback = wrapCallbackWithPriority(callback);\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue isn't solved.\n- Due to the current useMutableSource limitation, a selector can't return a function. (See `01_basic_spec` wrapping setState)\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","gitHead":"4da247842784c43d88b3cdbced2433b05d14dc4f","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.3","_nodeVersion":"10.19.0","_npmVersion":"6.14.3","dist":{"integrity":"sha512-tziNN7jNEewNt3M1gkKfbMMsm+BJOl0rStIVrt4M/uHSIyiLVS4EkXtlp3OvOT+xzt2GjrE8pq5Vu7M9c7TOpw==","shasum":"9cfb75769b719b5dc6120192d358236d8c669b6c","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.3.tgz","fileCount":12,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeehCsCRA9TVsSAnZWagAA+lEP/0AFMwFriS3f7xRaNe15\n5hBfUsW+MzG39aRJlxdumjRa0Qm0+mx8B6qa9vE9Y7n5Kg+VeobGM0pC5T5F\nEqqBhh9Yl7iu1MbgMUHVG5jkJEiSODiUshN47Lgu4r7QoEpXo4i8GDEZ1jbV\n3GZ4wdZb/4lcQsEoTxei/L35mBapAgL9kNvfR8Tv2T9DFLOsnfXAD9JDZMNH\nFvBStULIUOI8UcfQbtEVAMXmZqwN75mneVmv6MqtG+TEqNzjiQ72FH7U0+lk\ncaLbGAjwGsGeRYSpRMFo6j5aL/0jMWT7F7+E6Izjqkc4XymOtfEsVe8WLKLG\nEfFQcCEMGcMbRz6ddwii7O2dSikEkZxhleJpMTWq0cTAUHd76KyejZl0/uEm\njVwp2a2pzClF2ehe110bKAnAvupapJ7OjIPIl/eN19lZ5tdorkt7YeZWb5ej\nHrR6JLmiNzp4YQ9IfLFtV/+N8ay5C1EF41AtqNlZi8kvd+wu0Wn+yWr3WA+E\nuRu2HSXI1ldAlVs8mQslD5Wp+6W3jCvEximLxnKLdQbED5oNPDJfsIog/RxG\nU2Y58AUZjUdyXAYUIWWYaNUWIRJw429oAaVGWYz7UoFC9it7jodhHxGbJwRp\nCXGv0FLGIWsW8XFO4qJZ4s6tIO018jfFWyfaUGo/CsxhC87sCbN+Z5JuJ+LW\nFuAH\r\n=yyHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDNtgg8kq0wLvOEy3WOUezJ9H67QzAKecbgQlVD3BfAJAiAfjxxYT2BxDGiypnGzNOxarz2EjHhSBvEhM5mtPznrTQ=="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.3_1585057964371_0.30973645757459245"},"_hasShrinkwrap":false},"2.0.0-alpha.4":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.4","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.js","module":"./dist/index.esm.js","browser":"./dist/index.umd.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build --format cjs,es,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^10.0.4","@types/jest":"^25.2.3","@types/react":"^16.9.35","@types/react-dom":"^16.9.8","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^3.0.0","@typescript-eslint/parser":"^3.0.0","documentation":"^13.0.0","eslint":"^7.0.0","eslint-config-airbnb":"^18.1.0","eslint-plugin-import":"^2.20.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.2","html-webpack-plugin":"^4.3.0","jest":"^26.0.1","microbundle":"^0.12.0","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^26.0.0","ts-loader":"^7.0.4","typescript":"^3.9.3","webpack":"^4.43.0","webpack-cli":"^3.3.11","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"readme":"# use-context-selector\n\n[](https://travis-ci.com/dai-shi/use-context-selector)\n[](https://badge.fury.io/js/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n### wrapCallbackWithPriority\n\nA utility function to wrap a callback function with higher priority\n\nUse this for a callback that will change a value,\nwhich will be fed into context provider.\n\n#### Parameters\n\n- `callback` **Callback** \n\n#### Examples\n\n```javascript\nimport { wrapCallbackWithPriority } from 'use-context-selector';\n\nconst wrappedCallback = wrapCallbackWithPriority(callback);\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.\n- Due to the current useMutableSource limitation, a selector can't return a function. (See `01_basic_spec` wrapping setState)\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","gitHead":"2dff03da9fe2b2c276b736ee18826bdf22e3d7f4","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.4","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-u0i3lLsi7HfZV5ovSONwDmltIQCLjsxnSGStMIuyT3xH9P1aSp6+Cko/Gsu1vmBjqpTGNeQm2sI7PGjZc/krXA==","shasum":"6d48d7fd45ea57b585acf56708b929441d01c1b2","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.4.tgz","fileCount":12,"unpackedSize":44621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe06bhCRA9TVsSAnZWagAAO2UQAJxsVXIFQvtvjJaZK8mI\nDL7txfuvj2yh1sGgMEJgvGzSwBtYokei6wIWW4hDRAshZoVzYrhv117JCIe8\n1SNJMjSBxKX+7we7R6NZMV8hCC9+WKESKNuSa7GxD4UWFTY7HwNWw5b4IxJo\nc1mFuSHANLMCNgLzukRgRcvT3lWfgNSo34nFoCLslleJD4bQLlsFLbg7wX+N\nFTUPSslFinV99++pZRhww2xX9Rly1DiMPeTL/f5wek3OrMfjfBKzi+GRcfvJ\nIw0Csy2UpayUNG5OOWjv7Q5WKNdrLKujUTD4m7RW2c8sCucYW9T2lHi/2zCl\nZGJa+RwXUf5ex5ViMKXF6/XFn08tdhPLLTUoLhT9YUHLsmleF55l9iSIdMv4\ngQylTVepzUQbRuGTYOHcOkNvhFC9nAtAl8192gV10yVxQfosuYnnVdePG9Wb\nj4QD9ey1El0FW4/3Ku3R8543Nj+MKhFyOO5R2H+r//g6wTLV82qYQlb78ljg\nf/n5K7FypQwU07esZwtah6pec8tWm786pJI7SN60xdNiDeuzozIlCck47+MY\nsLN2vwE8Z7ZqN0sijsX03jZJMQA9aFgX+Q3bfhH0NeTVB1k8SCaF8FIMAF+G\nOqgkVL62du9Xbx4IrQ4Uze47lL3hi+cS9FprYQbuHHGoKTmc/7WDSeFYxivW\nhj5e\r\n=8Y0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwsXAzhuFiqkAJ9uVJOLl58rDKwYfIYFk4n/XPybrcyQIgMTLs08E53Rjad/+OkC+mrBCweyFbzJ5sjmLuVOkB9xQ="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.4_1590929120673_0.9760656970577173"},"_hasShrinkwrap":false},"1.1.2":{"name":"use-context-selector","description":"React useContextSelector hook in userland","version":"1.1.2","author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.js","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false src/index.js","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@babel/cli":"^7.10.4","@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","@babel/preset-react":"^7.10.4","@testing-library/react":"^10.4.3","@types/react":"^16.9.41","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","babel-loader":"^8.1.0","documentation":"^13.0.2","eslint":"^7.3.1","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.3","eslint-plugin-react-hooks":"^4.0.5","html-webpack-plugin":"^4.3.0","jest":"^26.1.0","microbundle":"^0.12.2","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","ts-loader":"^7.0.5","typescript":"^3.9.6","webpack":"^4.43.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.8.0"},"babel":{"presets":[["@babel/preset-env",{"targets":"> 0.2%, not dead"}],"@babel/preset-react"]},"gitHead":"5a07f62a65ad13665fd95230c30eac8aba904c7e","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@1.1.2","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-uwtrMKEHjZQ8JXMZLUljVDY4CqpAC3MgMcmtpZACG+pJeJ7GNDzBW0thC2RbJX2wKYMvLtYRXgQEqaOnmlF/KQ==","shasum":"63bf6e3502fd383f1257c49df2495e05564d262e","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.1.2.tgz","fileCount":10,"unpackedSize":25198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/aWXCRA9TVsSAnZWagAAneMP+gMOzqWZmGDYlZkqkAZ2\nqOT7RnYtu3CiEr49wInicA8vTiodqU1Aqx7j2Tb5eMQbCGmH+6LRbkbmBlzc\nPVa8r0FcHyjq2i4mNHgcLJ98bxT1vyUz40dcB9CIObOp5QmqT3RSngNqKmQ1\nQf704rxF1RkqEJHXQ68BJPKuSUHyUim7ztE5q7fUz/8G438dvNWAJ5stbLE4\n5Q6MAyNjBZALFhzkZWbOfjukSlGsjRlZsW8ybsAIYWYUDnYcb5hy2CDKLEAU\nJovl7YGOxef4U6yV6WianebmNABLLhVlMv8XMLefXQazOazKgFkn7MTUcopS\nMjHesqxV1Uf+iA9HLZWgJ6hVsTWfjkk87adDSdYQ50ui78w2ap8k8801oCUn\nKP/zIL9vzOYHBQUiQ0mDoWrco8mQit0KIERuR5n7Ft8oPE3cCg/EftSTgF1S\nneSD7iL6u03oIgw5cGlSw33VQ85UoiIwoRtHQZxFnUQJBAWvgnKCTxUKNVnu\n5Al1TQS1ue6FXGFDODjccgmShq9rppc1n6yPsSuqHnyykLqZ/A28XEpoQahJ\n2y3XQMpZWOopS4O+dlI8JLWLUTlKrsrJU3xzpQSP47Lmf+R1iz5gmjKwd1Z7\nltsrEYTA4INHz5VO9P4EY/2WSQMv9x7IQqRRlLOvAQ1VsB/LvRIsOWvHmtU9\nvYdQ\r\n=Z6yp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACgugfpvJ6lZJj8EGnJRd2o9kOcNV3s7k7ulpPM6sajAiALWcqoTSXZGehCsvfGAq6i8KSoHQlcvWky+DyQ8Z3LQw=="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_1.1.2_1593681303414_0.28524535930030037"},"_hasShrinkwrap":false},"2.0.0-alpha.5":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.5","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^10.4.3","@types/jest":"^26.0.3","@types/react":"^16.9.41","@types/react-dom":"^16.9.8","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","documentation":"^13.0.2","eslint":"^7.3.1","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.3","eslint-plugin-react-hooks":"^4.0.5","html-webpack-plugin":"^4.3.0","jest":"^26.1.0","microbundle":"^0.12.2","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^26.1.1","ts-loader":"^7.0.5","typescript":"^3.9.6","webpack":"^4.43.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"gitHead":"b571171a503678887c74d50a988eb64009f9ad77","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n### wrapCallbackWithPriority\n\nA utility function to wrap a callback function with higher priority\n\nUse this for a callback that will change a value,\nwhich will be fed into context provider.\n\n#### Parameters\n\n- `callback` **Callback** \n\n#### Examples\n\n```javascript\nimport { wrapCallbackWithPriority } from 'use-context-selector';\n\nconst wrappedCallback = wrapCallbackWithPriority(callback);\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.5","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-fEnhlNYRXpIJpHky36seMmZrtrZGjSFHJHFKg1GPbHyRqj1zqQ5ajkYwis+CyxqMZIMOFyBIotjxCAHBt/HvaQ==","shasum":"f58ff31b1d3bedca8fae30574e36538f7bffb121","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.5.tgz","fileCount":10,"unpackedSize":35156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/arbCRA9TVsSAnZWagAArwcP/1rwQYkuMYRT7OYdcHdt\na/Rn0R7Wmlu1IMEYwkbi1O+ohA5VU+4f8kDJ20fiiFD2hf4DzFWg8w0Z9rRm\n8fJxQ8WxPadsTKo5cKZTdgr2TrjJgHRDsrRuL5LvPiuSwS9dXy+sDuUCGvEm\nlOJebyPifIqhxOW9M8fCHajLL1Bs0BnOAMtnBJppQep98dgKUVu177HXvJPe\n3Yx07UTBNYWIhYKZDZKKTyqyXkAZhTkeCbPxPpQF5zhjGgATZjsHVdpc/2jZ\nRkCIc50aYM4488/LFxmRqVxNB+903xrWMQRnmGb/YibsFJ+67AR3B/FQauAt\nbcnSuG7na8wJDXPv8BlYMGT6M6Plwd1m1T13w6QOitz9dSFILk2pUIsjvhsN\n48JivRNL6M76g3Yz/W7/bM7j228ifCmqH4zDi31C4IVmQu2ZKJd2aUYRJ9cS\nu9nQUvsY/eef3/2qibgu5ZepmCxCR/0rRAUycgJJUUhVYgexzfWRfMcvepin\ntopygfbM5lq8R4w65ubPa+NUG6n+eovyOh9fJqaLFjBNf4QJsKJUhyAOd+TP\nr5au6yHy1e8eGhY6oaXnX2Tnw0Bfzkoco6N91cw7cPQ8zuC+YPZs9rFmpGs9\nh/FXVlubgSkyyjcXqbd3dagpzKd1hL03kJvZ6+X/UPpJzZOqrHAMW1NpfvGk\nHe6m\r\n=Jgba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ6c+Z5HubtckGIFpjerPKNPEJqou7jegue+MZp1JXzwIhANy4BgFatQHVCAtSeUqU8X5ctn72ENrHskyKk5apcxiN"}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.5_1593682651280_0.654038363907899"},"_hasShrinkwrap":false},"2.0.0-alpha.6":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.6","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^10.4.7","@types/jest":"^26.0.8","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^26.1.4","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"gitHead":"ce4ae3491be07ecffb83967990fbdb6bd4daabed","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n### wrapCallbackWithPriority\n\nA utility function to wrap a callback function with higher priority\n\nUse this for a callback that will change a value,\nwhich will be fed into context provider.\n\n#### Parameters\n\n- `callback` **Callback** \n\n#### Examples\n\n```javascript\nimport { wrapCallbackWithPriority } from 'use-context-selector';\n\nconst wrappedCallback = wrapCallbackWithPriority(callback);\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.6","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-N/sfGhc/IlRTG4wut1eBNkQ1h/N4VVgdEOVT68lEbljL5Tl6GoKD7EYQcitvVQOV1wFNFRr6Bp81IGv8OqQmqA==","shasum":"6ea98cece9b9fc487faca3d482bb443554442d63","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.6.tgz","fileCount":10,"unpackedSize":35384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKCT9CRA9TVsSAnZWagAA3YEP/A3H3eVRgWk5Ocg9I16a\nFXa8sXuCYfr81j6WZkRpW88qsA45LCrJ8oIHQJVkOvu27NGH2Y4x7fn1G82E\nAev3IqlVI4sx/HNN5GdvSUVCTa7N3VBAPuZ+ExZFJEWc/6qxYg8PoE7rP5fb\n8o82cHAYUfD9eitAAoVNPIyWzVowLU+gdUUqEnJfBC50WuFvKrg/8ZQrmEVM\n6EGv72TFcuTmSdkCXlSH1lWmzeDfYkmel6LFsP45RvbSqCh3SL6KjgreBOnD\n3kcFt9a98x1i7NrxYMTY66fdGm36Ppdtw6BreHMkdCi5LOChHjk69WCAtW7j\nP7xWP9h8ZZKCrHgYm/7OHcgybHsibe8CyNWIeVcPgWOJiR6Cmf1/n883yQ6C\nARYggOK3JtzS0uRV3oGztEOKPg+NLz8BLBEwl40Sq6ftazZUQkpI7itDzZJr\nGARMjO+cHIpd4bsn6aiX62u/yfWBSiI9kX6OyFuZ8uxzc/ZrGWbdAC17g5y5\nV7t3rWP5xJEpv3OzeNE87vgi0lefPd5XXjir4luDwecSFev1PyF96TawbJHT\nVXaKwwd3enIF6vArLGTRjNqqcJlnuANoixZgKKjwjLvHP8Jp1CMvEqE2zOjm\nFwXF3wdKJB/QEt7ReyV8hwQOB9cQAubjFwhb3zPnHfL8aVHMmw8qqk87jb+/\nOIIW\r\n=v4Nv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzuro7UbfgOvIc4NJ+ZuOEkKRO0Vk5zq1TVKjlVEqjRQIhAOoerVqBaKBOD3fn9Ual/nZIvGoN3h4pz0GNnCM0pVKq"}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.6_1596466428648_0.03464078748133259"},"_hasShrinkwrap":false},"2.0.0-alpha.7":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.7","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^10.4.7","@types/jest":"^26.0.8","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^26.1.4","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"gitHead":"feba3aabe8631fa70cfa3ec280c4f9843e86135b","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Migrating from v1 to v2\n\nIn v1:\n\n```js\nuseContextSelector(context, state => state.count);\n```\n\nIn v2:\n\n```js\nuseContext(context, useCallback(state => state.count, []));\n```\n\nIn this case, you can (should) also define the selector function outside render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for selector-enabled `useContext`.\n\nIt doesn't pass its value but a ref of the value.\nUnlike the original context provider, this context provider\nexpects the context value to be immutable and stable.\n\n#### Parameters\n\n- `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContext\n\nThis hook returns context value with optional selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\nThe selector must be stable.\nEither define selector outside render or wrap with `useCallback`.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n- `context` **Context<Value>** \n- `selector` **function (value: Value): Selected** (optional, default `identity as(value:Value)=>Selected`)\n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst firstName = useContext(PersonContext, state => state.firstName);\n```\n\n### useContextUpdate\n\nThis hook returns an update function that accepts a thunk function\n\nUse this for a function that will change a value.\n\n#### Parameters\n\n- `context` **Context<any>** \n\n#### Examples\n\n```javascript\nimport { useContextUpdate } from 'use-context-selector';\n\nconst update = useContextUpdate();\nupdate(() => setState(...));\n```\n\n## Limitations\n\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Neither context consumers or class components are supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.\n- Tearing is only avoided within the Provider tree. A value outside the Provider will tear. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@2.0.0-alpha.7","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-dxsLHR2QG7pyPx1Yx66ddZ5jrc7mQTd5/3+u9yWRLyNVU4LB6e6De8ZtLObZyBM+/QYUCE1KiQe2CH5IbaGCNw==","shasum":"4c2c1462a631b0f5ed47caeb175721c714e4decd","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-alpha.7.tgz","fileCount":10,"unpackedSize":41094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYtgACRA9TVsSAnZWagAAl/IP/0Bi7l7KqOR4mYbga8tP\n9rpFSKHwdgwawT5x37NuqdtNRKDLXUDNbzLDl79sVJlM9Jj19T9oMExXmTwF\nP2vojKt9YCC5FkRsWmGoBJXQ0sPiEGtMvHii0GOv9deaHqOk7B4sDlDKchbB\n9cbgXLJqJ8ooGFW6pb3d3+N+H0pvT/P17QDZZIpFY+xv/NzASdEDd+TaE43t\n7HTAYZHugukPrXuWW8LiCagOHZc8wY6V6iBUATwazndtPuba/cjruJsmW2Ww\nnYDh74O7xcU9pCxnqBmaLI7e+rVvABl7xkSa07mwQcQD8u83Wf92b8EcCeh1\nWmmHtsxKsQjrXor6uM8/2R4nRRDTSSPAYiX6ibWMbX1gAkayHOWqrnAbQRwp\nWRlNv+Zyyd07PDFNO6u650dPSmu5KNHRw9SVWOd4TwEtZsvE3MVsl+CPSjAa\nKhCNhHJgMdMiFyctID+S2fPvFQjBtCihgRwvWO2VwB/8eNWnQip8kCbB5yzq\nA7qF3CVCPl8aN3yVRjUhs6JXoxZl9mQbL/jww8xebgbw9S0EWF5I6tZWB+VX\nNnRrF+4vJV/TMUenQ4RD9CYOuiLuzbd8gUhS8MTKeNjKj9J0KNlpcvPTK7PP\nEu+wSE7EtYDnD9vZ0g59r5NuHuc5kC90NurUPNtNvZU6YrqZxpMoILfPeKis\nuKik\r\n=S02q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkyoy4P+bYyDC7RGAgwur2JJ1JSxY3HMKDcEqlVjhmMAiEA0JVFPMDoOh2QoQSe9RkjL99gW92rBHgfi/ui304J5FM="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-alpha.7_1600313344274_0.15859193439614994"},"_hasShrinkwrap":false},"1.1.3":{"name":"use-context-selector","description":"React useContextSelector hook in userland","version":"1.1.3","author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.js","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false src/index.js","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@babel/cli":"^7.10.5","@babel/core":"^7.11.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.10.4","@testing-library/react":"^10.4.7","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","babel-loader":"^8.1.0","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.8.0"},"babel":{"presets":[["@babel/preset-env",{"targets":"> 0.2%, not dead"}],"@babel/preset-react"]},"gitHead":"8d1cdbd8bbb65c0bef8e6c203887028bbe12272c","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@1.1.3","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-xdwD8s7nvPIsZHP8MtKZQ8Q1bC4KynhXOLN9Ck8dKkuXDVOYQQ0xqe0ueFpImeJeHPpFDiN/3chmlk1PuPfGxw==","shasum":"47e9f4972df0b23c34eb3ed18057b13b595b1bb3","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.1.3.tgz","fileCount":10,"unpackedSize":25896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY1kUCRA9TVsSAnZWagAABNsP/0eiPzh4lLgLfROxlRuq\nP5jP2tvIazauK/1pfbB+kXe4vjIzNyKLoTzjbBEwrwP3o1TcAI0wXBk+d+iB\nd5lRfsyF9ru2tDU7YyiJHyo8uTh37b/QLp+UZvamnOjWrO37jKiuY9+2p5OP\n0c0Mes2V5H5Q3PD7aVhCibj0RekCIJQ7PBKCibvy6lAWud5C6VNI5RrBiGil\nMjnq+q9ygEcYKt7BKh9XJDrqiyOLUZrHdl43GAP0bHSBXJPnIKYbWUvYo9jD\n1c3T5lZeIyiQDCrPG4UEp7/NDfG+J8BVLIti8uEycgNAPhMB0ODB0+X88hRZ\nLBtk118/hx53b+wRcfovlV958iV1XVMMqJJu07K29Ihdy7beQWdt6Mm7drvg\nRIXEdvTt7XgcOLLYcHPjfJ3PY+BJxjKsxZJudYOMuL7wnbwsfel9LdKcj4ZT\nF3P9j48fUDiW2XP+d3h7iwBnyWaAKfd0rXYWMCPGqcKIX4ONIx+xlzyhul9p\ng4AdQHaXjOWPSFgjtc50xNd5KKpXDe+dcATh4kRr7KoLoAscJ9/wb/yDLaDV\nMvs3j/jYn7A0hqner6c7qQR70J2SBSOUtFtmYHisBBMKjFSY11vP6Ju3VEJn\nCJJIrRjwLksheHx7u2JktlPvNfi3JP934FyizTa2+OrQG76l6e86raBp37If\neNE7\r\n=gtpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCb0wi0a5sufINbIqKv2QO0UFp7S1AL9NmXjZuRx6K9YgIgTckBVPG81C2UA11aZeufImlDCvWcDNZSco/7Ki3c/aU="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_1.1.3_1600346387976_0.7504690624397721"},"_hasShrinkwrap":false},"1.1.4-beta.1":{"name":"use-context-selector","description":"React useContextSelector hook in userland","version":"1.1.4-beta.1","publishConfig":{"tag":"beta"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.js","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false src/index.js","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@babel/cli":"^7.10.5","@babel/core":"^7.11.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.10.4","@testing-library/react":"^10.4.7","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","babel-loader":"^8.1.0","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.8.0"},"babel":{"presets":[["@babel/preset-env",{"targets":"> 0.2%, not dead"}],"@babel/preset-react"]},"gitHead":"d6b9fd3a67c931a66c6004a45fd1972719f9858d","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContextSelector hook in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119) is recently proposed.\nWhile waiting for the process, this library provides the API in userland.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Technical memo\n\nReact context by nature triggers propagation of component re-rendering\nif a value is changed. To avoid this, this library uses undocumented\nfeature of `calculateChangedBits`. It then uses a subscription model\nto force update when a component needs to re-render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for `useContextSelector`.\n\n#### Parameters\n\n- `defaultValue` **any** \n\n#### Examples\n\n```javascript\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\nReturns **React.Context** \n\n### useContextSelector\n\nThis hook returns context selected value by selector.\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\n\n#### Parameters\n\n- `context` **React.Context** \n- `selector` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** \n\n#### Examples\n\n```javascript\nconst firstName = useContextSelector(PersonContext, state => state.firstName);\n```\n\nReturns **any** \n\n### useContext\n\nThis hook returns the entire context value.\nUse this instead of React.useContext for consistent behavior.\n\n#### Parameters\n\n- `context` **React.Context** \n\n#### Examples\n\n```javascript\nconst person = useContext(PersonContext);\n```\n\nReturns **any** \n\n### BridgeProvider\n\nThis is a Provider component for bridging multiple react roots\n\n#### Parameters\n\n- `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** \n - `props.context` **React.Context** \n - `props.value` **any** \n - `props.children` **React.ReactNote** \n\n#### Examples\n\n```javascript\nconst valueToBridge = useContext(PersonContext);\nreturn (\n \n \n {children}\n \n \n);\n```\n\nReturns **React.ReactElement** \n\n## Limitations\n\n- Subscriptions are per-context basis. So, even if there are multiple context providers in a component tree, all components are subscribed to all providers. This may lead false positives (extra re-renders).\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Context consumers are not supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland. (workaround with try-catch)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@1.1.4-beta.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-jT/7CgfEA/Zg83CmO85EwZdNRUlBTWfn+mP28GWTx1IAgYPcbIhVfSKA9wgDyowXQQGQkuu++gV7/bpNSDXV/Q==","shasum":"905c7401b17f048eb646891fa3e770bd2accc2b0","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.1.4-beta.1.tgz","fileCount":10,"unpackedSize":32366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaDxECRA9TVsSAnZWagAAIcYP+wTetw3sia1s9taJ+Hle\n2nsi+e2rcWeM7P6sk57/U9XIa9AgpTOvcEEKJuCzk+MUazC55hVTJ7SzwvSw\nGL/0Hd7T7Rg1gkhK3v7qydIQUuwsx+lLwKuR9rScSHmmzIW4OUMTAYFO+JwH\nfCrppK8MUYM3x87Cvor7jyF2kBZ/EKkLrXZcTfS31s1sBQj/f1FAMOwgENk+\n+WtJtTXvb//mtZqRjqLsflt3WGOQGhVSj5WtrlWCCqx04G3GiZD9lfyTcuzV\nTjGuVwvRqaUPRWF27252i/BJgmypYjVnr9SYiX18TP3YyHDKBrQXAFnhqoxC\nSErvP76VEGwd1w8KPvzEeyPducE8wa6Syr0tl1C1a6+YjbKIa3rj53V5+EKG\nuxv1qjzKYNlcHKhIJb/A96CvkHJ7ED781hjkhbKVmHP/YlQPri9n8usGEwSH\npttN8YzFYvUyHKO6ytAvUKmSczTXQV38mXprFwJSnr4fpLT4U79tHIzTtO4o\nWAd84z4kchihTA5m0skWlSxuAlBleh4PrqUbZzOdofU+jdjTKcspYm+bTuJP\nrfu0jMcP6y6nEJc508hPwXnzV0pp5UvU/Kw/gp8ZwiG9KUhVE/2ZMVsup13x\nSGt1LFOXzfrmt/nsRRp59Kt/gbml7kbhVMFy0Smk1RFJC0EfQDnV9hWWDdki\nDzfq\r\n=QSZ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpKS9R6MdT6qYwcw50Xp3HPYwNCQTN+szzjcpsMc+PbQIgYKoMI05PTZbyMi/G48eSvHzCOzkfFIrfdRcGkdvTNVg="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_1.1.4-beta.1_1600666692367_0.8894145319214171"},"_hasShrinkwrap":false},"1.1.4-beta.2":{"name":"use-context-selector","description":"React useContextSelector hook in userland","version":"1.1.4-beta.2","publishConfig":{"tag":"beta"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.js","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false src/index.js","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@babel/cli":"^7.10.5","@babel/core":"^7.11.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.10.4","@testing-library/react":"^10.4.7","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","babel-loader":"^8.1.0","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.8.0"},"babel":{"presets":[["@babel/preset-env",{"targets":"> 0.2%, not dead"}],"@babel/preset-react"]},"gitHead":"a5aa035db2d84cc7c9509780ce1eb2e1213294e9","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContextSelector hook in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119) is recently proposed.\nWhile waiting for the process, this library provides the API in userland.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState({ count1: 0, count2: 0 });\n return (\n \n {children}\n \n );\n};\n\nconst App = () => (\n \n \n \n \n);\n\nReactDOM.render(, document.getElementById('app'));\n```\n\n## Technical memo\n\nReact context by nature triggers propagation of component re-rendering\nif a value is changed. To avoid this, this library uses undocumented\nfeature of `calculateChangedBits`. It then uses a subscription model\nto force update when a component needs to re-render.\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for `useContextSelector`.\n\n#### Parameters\n\n- `defaultValue` **any** \n\n#### Examples\n\n```javascript\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\nReturns **React.Context** \n\n### useContextSelector\n\nThis hook returns context selected value by selector.\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\n\n#### Parameters\n\n- `context` **React.Context** \n- `selector` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** \n\n#### Examples\n\n```javascript\nconst firstName = useContextSelector(PersonContext, state => state.firstName);\n```\n\nReturns **any** \n\n### useContext\n\nThis hook returns the entire context value.\nUse this instead of React.useContext for consistent behavior.\n\n#### Parameters\n\n- `context` **React.Context** \n\n#### Examples\n\n```javascript\nconst person = useContext(PersonContext);\n```\n\nReturns **any** \n\n### BridgeProvider\n\nThis is a Provider component for bridging multiple react roots\n\n#### Parameters\n\n- `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** \n - `props.context` **React.Context** \n - `props.value` **any** \n - `props.children` **React.ReactNote** \n\n#### Examples\n\n```javascript\nconst valueToBridge = useContext(PersonContext);\nreturn (\n \n \n {children}\n \n \n);\n```\n\nReturns **React.ReactElement** \n\n## Limitations\n\n- Subscriptions are per-context basis. So, even if there are multiple context providers in a component tree, all components are subscribed to all providers. This may lead false positives (extra re-renders).\n- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n- Provider trigger re-renders only if the context value is referentially changed.\n- Context consumers are not supported.\n- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland. (workaround with try-catch)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/master/examples/02_typescript)\n\n## Related projects\n\n- [react-tracked](https://github.com/dai-shi/react-tracked)\n- [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@1.1.4-beta.2","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vDDqicyGN0KcAcyI2PuX/fPE723s9Ys1Zp1jry/4c0atjSFWWDjqLb64ONZBMRbvOjh8YgfzhzCf2DM5sZFm2g==","shasum":"e0962ea6ef0ede523f279e7c8383e79775ebb009","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.1.4-beta.2.tgz","fileCount":10,"unpackedSize":30242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaEnrCRA9TVsSAnZWagAAFhgP/jHv2tknFxYiapV2r5oJ\nXPs8R9OKJnDbelJn/WTqVxPlcEvdGKokpdVR93J2M7h5cAUZ5vH0aIZ1P/FD\njBkE4SgLNU8qNsCBs7NSZQzysuDzRrxy68/50+OQKSgQQSfdp5oHpzOVDI9r\nc1IiYFE4GNj99804pWDbnvoh4gEzccAP9c+HmUe0Mv1OAYk3Lm7ukvoo+g/k\nU4QntVQlQbHr2P1B2qqAmLa/U+CI/St9rjrzBbWBe28Xv9igbVgqVuPlCfci\n5z5CeCpYrCrQHfKh6Czp8q45DEScDsZmmEittQGlYigU9jJQzTT5OAH10pDN\n/PcPewKZa1VWyL5fuKSNyXgzoms1gdbla4vnS2o1wWyoR4ywQbW+SwXLnjJ8\nPkHRjhpPxhOU4Js8MkrOpTIEdW93wcB52X9Bs/LIlPY7f1XAnJSzT2VKv6lz\nljRXDwXxLBRoLDLsGBrpyfsS4XljhvAUEQzpDN30sDEtNbThsUnDuIuFKUso\n4V+jyNXxLwbRC5zUHEINvn4gn4beGtSNudDkyBH8EVu0e2FlZVNK1cazGNW1\nrbT/myWd2Ttic6jwB1WiJwf9obD6G/39vJA0Tcw27O1db9Njqkc5/07K3bqj\n/0UgUK4aRYpe5yNDspaw6HDPGfyLGtOFRJLihuiH2EXbExV3S5qZ6fEmNbwn\n+Rhz\r\n=fmKp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGM5AsF0i28ypubh2KDkPAkVdW7SgUwBBWdDFHcJXATGAiEApd6JpNvhcmWjWrw//EZYpRED4Ya/JdSwCgPN+SpWchw="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_1.1.4-beta.2_1600670186611_0.5793301320954969"},"_hasShrinkwrap":false},"1.1.4":{"name":"use-context-selector","description":"React useContextSelector hook in userland","version":"1.1.4","author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.js","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false src/index.js","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@babel/cli":"^7.10.5","@babel/core":"^7.11.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.10.4","@testing-library/react":"^10.4.7","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","babel-loader":"^8.1.0","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.8.0"},"babel":{"presets":[["@babel/preset-env",{"targets":"> 0.2%, not dead"}],"@babel/preset-react"]},"gitHead":"7f9c0614ea7ebc254a61c86ec28bd5fd45331572","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_id":"use-context-selector@1.1.4","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-qJ1KFw6G7XUTdyiUODz+XO0fRdfB6qApjZP/R+uqtO5ptGdmmq276z2my5hU8SFhzFEwXCj7tFNFA9w8LVkjJQ==","shasum":"11c1cc3856a7ea06972a7b1e0402ce86b9a8ed31","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.1.4.tgz","fileCount":10,"unpackedSize":30268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaf7LCRA9TVsSAnZWagAAibMP+wTTBtsICwskF0QjelK8\ncF9hD/CgOeoDlFNLnULZ6vJiIQZ+ep1n9ApEnTFq+CtjJ1xz/Z3WNQuhHRkA\nRkmp/wp/U6BMXIn+KeDKPCnyARkdazc1vCnSEyOKpyvEZHad1XUEiKAzva8d\n2oJiKSajAjQJYCot6Mcng6om0mzJ+QUtdnN6ojJSG1ztccvAquQlBurgn9du\nndW7BDyWGYE8I3f3+1Y5pGISdq0aMwnmvT/HyyIr5uwkZG/vGXPilYwcLTze\nVBrCcR16CqH6N5uoXCJEmSJsBfKNFaRxkCvwsYQHAxP45G1ZvN1+NA0slHc8\nGs3xeX302buHMaUSCd9BK2urIhptVRulscCwXrQWtLI/pHTgOQ39f+zdSdNE\nWf56nDo8c/HHphgE/64xytw1z5yxK+tjDCvmfdY3CWsJ0Lux02GtFMWEmJKo\nTpkdNE2Rw8bTnJP/Pjs5u4xjvc9E/jThjTBoNdfX3Wc+7yJVzm4BqzbVDmFQ\nmAHmWCDq08sDVSHpG8x8b+T49pQVjqYgGQRRxmEsjE+NKHC84QQp5IV/yLIB\nLI7AKIg0/1XtaOuQXa3mT4U+ZG0xnoCjZ7unxnf0c0MQT1Z4LTJ4M26OFgLY\nq38B5U91qTARl9GjxTzU9CisigDFAEagSgAAvV8vFUf74pwPPmJc8pt+ONZM\nqdwn\r\n=1UQR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8f3ymuNmxoGIEt/GhnNR7XhMGCJt7uOSG4uHwCQWsfgIgCQFcRtkAffaPO4DdYBYmCyecMufoM7u0xZhgUW3qSWM="}]},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_1.1.4_1600782027424_0.602649572771575"},"_hasShrinkwrap":false},"2.0.0-alpha.9":{"name":"use-context-selector","description":"React useContext with selector support in userland","version":"2.0.0-alpha.9","publishConfig":{"tag":"next"},"author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.umd.js","module":"./dist/index.modern.js","types":"./dist/src/index.d.ts","sideEffects":false,"scripts":{"compile":"microbundle build -f modern,umd","test":"run-s eslint tsc-test jest","eslint":"eslint --ext .js,.ts,.tsx --ignore-pattern dist .","jest":"jest --preset ts-jest/presets/js-with-ts __tests__/*.tsx","tsc-test":"tsc --project . --noEmit","apidoc":"documentation readme --section API --markdown-toc false --parse-extension ts src/*.ts","examples:01_minimal":"DIR=01_minimal EXT=js webpack-dev-server","examples:02_typescript":"DIR=02_typescript webpack-dev-server"},"keywords":["react","context","hooks"],"license":"MIT","dependencies":{},"devDependencies":{"@testing-library/react":"^10.4.7","@types/jest":"^26.0.8","@types/react":"^16.9.44","@types/react-dom":"^16.9.8","@types/scheduler":"^0.16.1","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.7.1","documentation":"^13.0.2","eslint":"^7.6.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","html-webpack-plugin":"^4.3.0","jest":"^26.2.2","microbundle":"^0.12.3","npm-run-all":"^4.1.5","react":"experimental","react-dom":"experimental","scheduler":"experimental","ts-jest":"^26.1.4","ts-loader":"^8.0.2","typescript":"^3.9.7","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"peerDependencies":{"react":">=16.14.0","scheduler":">=0.20.0"},"gitHead":"444631371bf076839146ea23a6fef9e51eb5a205","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n\nReact useContext with selector support in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nv1 uses `calculateChangedBits=()=>0` technique to stop propagation,\nwhile v2 uses `useMutableSource`.\n\n## Install\n\n```bash\nnpm install use-context-selector\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, v => v[0].count1);\n const setState = useContextSelector(context, v => v[1]);\n const increment = () => setState(s => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => (\n \n {children}\n \n);\n\nconst App = () => (\n \n \n \n \n);\n\ncreateRoot(document.getElementById('app')).render();\n```\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for `useContextSelector`.\n\n#### Parameters\n\n* `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContextSelector\n\nThis hook returns context selected value by selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n* `context` **Context\\** \n* `selector` **function (value: Value): Selected** \n\n#### Examples\n\n```javascript\nimport { useContextSelector } from 'use-context-selector';\n\nconst firstName = useContextSelector(PersonContext, (state) => state.firstName);\n```\n\n### useContext\n\nThis hook returns the entire context value.\nUse this instead of React.useContext for consistent behavior.\n\n#### Parameters\n\n* `context` **Context\\** \n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst person = useContext(PersonContext);\n```\n\n### useContextUpdate\n\nThis hook returns an update function to wrap an updating function\n\nUse this for a function that will change a value in\nconcurrent rendering in React 18.\nOtherwise, there's no need to use this hook.\n\n#### Parameters\n\n* `context` **Context\\** \n\n#### Examples\n\n```javascript\nimport { useContextUpdate } from 'use-context-selector';\n\nconst update = useContextUpdate();\n\n// Wrap set state function\nupdate(() => setState(...));\n\n// Experimental suspense mode\nupdate(() => setState(...), { suspense: true });\n```\n\n### BridgeProvider\n\nThis is a Provider component for bridging multiple react roots\n\n#### Parameters\n\n* `$0` **{context: Context\\, value: any, children: ReactNode}** \n\n * `$0.context` \n * `$0.value` \n * `$0.children` \n\n#### Examples\n\n```javascript\nconst valueToBridge = useBridgeValue(PersonContext);\nreturn (\n \n \n {children}\n \n \n);\n```\n\n### useBridgeValue\n\nThis hook return a value for BridgeProvider\n\n#### Parameters\n\n* `context` **Context\\** \n\n## Limitations\n\n* In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n* Provider trigger re-renders only if the context value is referentially changed.\n* Neither context consumers or class components are supported.\n* The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.\n* Tearing is only avoided if all consumers get data using `useContextSelector`. If you use both props and `use-context-selector` to pass the same data, they may provide inconsistence data for a brief moment. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 yarn run examples:01_counter\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/01_counter)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/02_person)\n[03](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)\n\n## Projects that use use-context-selector\n\n* [react-tracked](https://github.com/dai-shi/react-tracked)\n* [use-atom](https://github.com/dai-shi/use-atom)\n* [react-hooks-fetch](https://github.com/dai-shi/react-hooks-fetch)\n","readmeFilename":"README.md","gitHead":"384bc94e36869c8a90e0ac967add2807db1ea56a","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_nodeVersion":"18.20.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-AODu0x/FzGXTWnVDD/zTSP6JQ3n5LWQm8PKJzrmzX9vQuXuw83Chf1pBYzq9TkCy2Hi1L1b8W02fBBbftKQrIA==","shasum":"c1d307018a3233818dd6af4d3111666638f4205e","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0-beta.0.tgz","fileCount":9,"unpackedSize":43036,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID475gRqoDFIYyNqSdvsQOLSnHc3DrFhJGjj0duq5F9rAiB8aLBNE5RzP9mRnaKZryvWKi8ynS2RkZ1Aq91TDCZQ7w=="}]},"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0-beta.0_1714180764955_0.8679135123996933"},"_hasShrinkwrap":false},"2.0.0":{"name":"use-context-selector","description":"React useContextSelector hook in userland","version":"2.0.0","type":"module","author":{"name":"Daishi Kato"},"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"source":"./src/index.ts","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{"./package.json":"./package.json",".":{"require":{"types":"./dist/cjs/index.d.ts","default":"./dist/cjs/index.js"},"default":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"sideEffects":false,"packageManager":"pnpm@8.15.0","scripts":{"compile":"rm -rf dist && pnpm run '/^compile:.*/'","compile:esm":"tsc -p tsconfig.esm.json","compile:cjs":"tsc -p tsconfig.cjs.json && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json","test":"pnpm run '/^test:.*/'","test:format":"prettier -c .","test:lint":"eslint .","test:types":"tsc -p . --noEmit","test:types:examples":"tsc -p examples --noEmit","test:spec":"vitest run","apidoc":"documentation readme src --section API --markdown-toc false --parse-extension ts","examples:01_counter":"DIR=01_counter vite","examples:02_person":"DIR=02_person vite","examples:03_suspense":"DIR=03_suspense vite"},"keywords":["react","context","hooks"],"license":"MIT","prettier":{"singleQuote":true},"devDependencies":{"@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^15.0.5","@testing-library/user-event":"^14.5.2","@types/node":"^20.12.7","@types/react":"^18.3.1","@types/react-dom":"^18.3.0","@types/scheduler":"^0.23.0","@typescript-eslint/eslint-plugin":"^7.7.1","@typescript-eslint/parser":"^7.7.1","documentation":"^14.0.3","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-react":"^7.34.1","eslint-plugin-react-hooks":"^4.6.2","happy-dom":"^14.7.1","prettier":"^3.2.5","react":"^18.3.1","react-dom":"^18.3.1","scheduler":"^0.23.2","ts-expect":"^1.3.0","typescript":"^5.4.5","vite":"^5.2.10","vitest":"^1.5.2"},"peerDependencies":{"react":">=18.0.0","scheduler":">=0.19.0"},"_id":"use-context-selector@2.0.0","gitHead":"7166bce56ee137fcccdd9e66c3981d1c13ff520f","bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"homepage":"https://github.com/dai-shi/use-context-selector#readme","_nodeVersion":"18.20.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-owfuSmUNd3eNp3J9CdDl0kMgfidV+MkDvHPpvthN5ThqM+ibMccNE0k+Iq7TWC6JPFvGZqanqiGCuQx6DyV24g==","shasum":"3b5dafec7aa947c152d4f0aa7f250e99a205df3d","tarball":"https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0.tgz","fileCount":9,"unpackedSize":43149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+pKcoy9D/wZv9mbvLaFP5f2MCkCyyTs78YtG9W5CY3AiBAtappHcIi8n6RA38RGxbnf2IDe3IE95s740Mum2iP1A=="}]},"_npmUser":{"name":"daishi","email":"daishi@axlight.com"},"directories":{},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-context-selector_2.0.0_1714994639112_0.5844001364876212"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-05T03:08:30.561Z","0.1.0":"2019-07-05T03:08:30.706Z","modified":"2024-05-06T11:23:59.422Z","0.2.0":"2019-07-06T23:50:02.939Z","0.3.0":"2019-07-20T13:13:17.547Z","0.4.0":"2019-07-23T01:22:24.986Z","1.0.0":"2019-08-02T15:11:14.265Z","1.0.1":"2019-09-27T14:04:38.232Z","1.1.0":"2020-02-24T00:50:55.382Z","1.1.1":"2020-03-02T11:55:48.646Z","2.0.0-alpha.1":"2020-03-12T00:49:02.980Z","2.0.0-alpha.2":"2020-03-24T00:51:29.863Z","2.0.0-alpha.3":"2020-03-24T13:52:44.512Z","2.0.0-alpha.4":"2020-05-31T12:45:20.776Z","1.1.2":"2020-07-02T09:15:03.619Z","2.0.0-alpha.5":"2020-07-02T09:37:31.424Z","2.0.0-alpha.6":"2020-08-03T14:53:48.750Z","2.0.0-alpha.7":"2020-09-17T03:29:04.394Z","1.1.3":"2020-09-17T12:39:48.085Z","1.1.4-beta.1":"2020-09-21T05:38:12.501Z","1.1.4-beta.2":"2020-09-21T06:36:26.800Z","1.1.4":"2020-09-22T13:40:27.532Z","2.0.0-alpha.9":"2020-09-29T12:01:17.457Z","1.2.0":"2020-10-01T12:53:12.221Z","1.2.1":"2020-10-01T13:29:35.210Z","1.2.2":"2020-10-02T12:39:44.341Z","1.2.3":"2020-10-03T08:12:10.004Z","1.2.4":"2020-10-03T12:09:43.374Z","1.2.5":"2020-10-03T13:05:33.355Z","1.2.6":"2020-10-07T22:19:51.345Z","1.2.7":"2020-10-07T22:46:59.668Z","1.2.8":"2020-10-08T09:07:26.186Z","1.2.9":"2020-10-16T12:39:52.128Z","1.2.10":"2020-10-17T10:58:22.910Z","1.2.11":"2020-11-09T11:35:42.638Z","1.2.12":"2020-11-29T00:19:23.769Z","1.3.0":"2020-12-01T12:33:53.534Z","1.3.1":"2020-12-03T10:08:39.128Z","1.3.2":"2020-12-03T10:28:23.650Z","1.3.3":"2020-12-11T14:53:07.478Z","1.3.4":"2020-12-12T02:35:42.563Z","1.3.5":"2021-01-06T12:39:53.163Z","1.3.6":"2021-01-22T17:02:44.717Z","1.3.7":"2021-01-24T13:56:25.727Z","1.3.8":"2021-09-18T03:01:58.581Z","1.3.9":"2021-09-20T10:32:17.772Z","1.3.10":"2022-04-12T00:31:29.983Z","1.4.0":"2022-05-17T00:59:05.886Z","1.4.1":"2022-06-07T23:18:24.216Z","1.4.2":"2024-03-02T00:22:45.193Z","1.4.3":"2024-03-06T01:49:59.686Z","1.4.4":"2024-03-08T13:35:38.469Z","2.0.0-beta.0":"2024-04-27T01:19:25.327Z","2.0.0":"2024-05-06T11:23:59.259Z"},"maintainers":[{"name":"daishi","email":"daishi@axlight.com"}],"description":"React useContextSelector hook in userland","homepage":"https://github.com/dai-shi/use-context-selector#readme","keywords":["react","context","hooks"],"repository":{"type":"git","url":"git+https://github.com/dai-shi/use-context-selector.git"},"author":{"name":"Daishi Kato"},"bugs":{"url":"https://github.com/dai-shi/use-context-selector/issues"},"license":"MIT","readme":"# use-context-selector\n\n[](https://github.com/dai-shi/use-context-selector/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/use-context-selector)\n[](https://bundlephobia.com/result?p=use-context-selector)\n[](https://discord.gg/MrQdmzd)\n\nReact useContextSelector hook in userland\n\n## Introduction\n\nReact Context and useContext is often used to avoid prop drilling,\nhowever it's known that there's a performance issue.\nWhen a context value is changed, all components that useContext\nwill re-render.\n\nTo solve this issue,\n[useContextSelector](https://github.com/reactjs/rfcs/pull/119)\nis proposed and later proposed\n[Speculative Mode](https://github.com/reactjs/rfcs/pull/150)\nwith context selector support.\nThis library provides the API in userland.\n\nPrior to v1.3, it uses `changedBits=0` feature to stop propagation,\nv1.3 no longer depends on this undocumented feature.\n\n## Install\n\nThis package requires some peer dependencies, which you need to install by yourself.\n\n```bash\nnpm install use-context-selector react scheduler\n```\n\nNotes for library authors:\n\nPlease do not forget to keep `\"peerDependencies\"` and\nnote instructions to let users to install peer dependencies.\n\n## Technical memo\n\nTo make it work like original React context, it uses\n[useReducer cheat mode](https://overreacted.io/a-complete-guide-to-useeffect/#why-usereducer-is-the-cheat-mode-of-hooks) intentionally.\n\nIt also requires `useContextUpdate` to behave better in concurrent rendering.\nIts usage is optional and only required if the default behavior is unexpected.\n\nIf you need a simpler solution, you can use `useSyncExternalStore` without any libraries. See [an example](https://github.com/dai-shi/use-context-selector/issues/109#issuecomment-1785147682).\n\n## Usage\n\n```javascript\nimport { useState } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { createContext, useContextSelector } from 'use-context-selector';\n\nconst context = createContext(null);\n\nconst Counter1 = () => {\n const count1 = useContextSelector(context, (v) => v[0].count1);\n const setState = useContextSelector(context, (v) => v[1]);\n const increment = () =>\n setState((s) => ({\n ...s,\n count1: s.count1 + 1,\n }));\n return (\n
\n );\n};\n\nconst StateProvider = ({ children }) => (\n \n {children}\n \n);\n\nconst App = () => (\n \n \n \n \n);\n\ncreateRoot(document.getElementById('app')).render();\n```\n\n## API\n\n\n\n### createContext\n\nThis creates a special context for `useContextSelector`.\n\n#### Parameters\n\n* `defaultValue` **Value** \n\n#### Examples\n\n```javascript\nimport { createContext } from 'use-context-selector';\n\nconst PersonContext = createContext({ firstName: '', familyName: '' });\n```\n\n### useContextSelector\n\nThis hook returns context selected value by selector.\n\nIt will only accept context created by `createContext`.\nIt will trigger re-render if only the selected value is referentially changed.\n\nThe selector should return referentially equal result for same input for better performance.\n\n#### Parameters\n\n* `context` **Context\\** \n* `selector` **function (value: Value): Selected** \n\n#### Examples\n\n```javascript\nimport { useContextSelector } from 'use-context-selector';\n\nconst firstName = useContextSelector(PersonContext, (state) => state.firstName);\n```\n\n### useContext\n\nThis hook returns the entire context value.\nUse this instead of React.useContext for consistent behavior.\n\n#### Parameters\n\n* `context` **Context\\** \n\n#### Examples\n\n```javascript\nimport { useContext } from 'use-context-selector';\n\nconst person = useContext(PersonContext);\n```\n\n### useContextUpdate\n\nThis hook returns an update function to wrap an updating function\n\nUse this for a function that will change a value in\nconcurrent rendering in React 18.\nOtherwise, there's no need to use this hook.\n\n#### Parameters\n\n* `context` **Context\\** \n\n#### Examples\n\n```javascript\nimport { useContextUpdate } from 'use-context-selector';\n\nconst update = useContextUpdate();\n\n// Wrap set state function\nupdate(() => setState(...));\n\n// Experimental suspense mode\nupdate(() => setState(...), { suspense: true });\n```\n\n### BridgeProvider\n\nThis is a Provider component for bridging multiple react roots\n\n#### Parameters\n\n* `$0` **{context: Context\\, value: any, children: ReactNode}** \n\n * `$0.context` \n * `$0.value` \n * `$0.children` \n\n#### Examples\n\n```javascript\nconst valueToBridge = useBridgeValue(PersonContext);\nreturn (\n \n \n {children}\n \n \n);\n```\n\n### useBridgeValue\n\nThis hook return a value for BridgeProvider\n\n#### Parameters\n\n* `context` **Context\\** \n\n## Limitations\n\n* In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.\n* Provider trigger re-renders only if the context value is referentially changed.\n* Neither context consumers or class components are supported.\n* The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.\n* Tearing is only avoided if all consumers get data using `useContextSelector`. If you use both props and `use-context-selector` to pass the same data, they may provide inconsistence data for a brief moment. (`02_tearing_spec` fails)\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 yarn run examples:01_counter\n```\n\nand open in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/01_counter)\n[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/02_person)\n[03](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)\n\n## Projects that use use-context-selector\n\n* [react-tracked](https://github.com/dai-shi/react-tracked)\n* [use-atom](https://github.com/dai-shi/use-atom)\n* [react-hooks-fetch](https://github.com/dai-shi/react-hooks-fetch)\n","readmeFilename":"README.md"}