{"_id":"@air/react-memoized-context","_rev":"74-bff4fc583b5e2129c977d3b7aac045b8","name":"@air/react-memoized-context","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@air/react-memoized-context","version":"1.0.0","author":{"name":"Air Labs, Inc."},"_id":"@air/react-memoized-context@1.0.0","maintainers":[{"name":"cgatesman","email":"chad@air.inc"},{"name":"ershadul-air","email":"ershadul@air.inc"},{"name":"jwinfield-air","email":"jim@air.inc"},{"name":"akrom2022","email":"akrom@air.inc"},{"name":"sashi_kanth","email":"sashikanth5890@gmail.com"},{"name":"juanignaciosalas","email":"juan@air.inc"},{"name":"subug","email":"subu@air.inc"},{"name":"willcoliveira","email":"will@air.inc"},{"name":"dwilt","email":"dwilt4rville@gmail.com"},{"name":"andytran","email":"hello@andytran.me"},{"name":"tomasz_czura","email":"tomasz@air.inc"},{"name":"milesk","email":"katelyn@air.inc"},{"name":"airdev","email":"dev@air.inc"},{"name":"madisondbrown","email":"madison@air.inc"},{"name":"kaveh-air","email":"kaveh@air.inc"},{"name":"stewart-air","email":"stewart@air.inc"},{"name":"marcusair","email":"marcus@air.inc"},{"name":"tstrand","email":"tyler@air.inc"},{"name":"nworb_air","email":"emma@air.inc"}],"homepage":"https://github.com/AirLabsTeam/react-memoized-context#readme","bugs":{"url":"https://github.com/AirLabsTeam/react-memoized-context/issues"},"dist":{"shasum":"103ec1406f2b775f0e44cdbbf040d7788cb92c87","tarball":"https://registry.npmjs.org/@air/react-memoized-context/-/react-memoized-context-1.0.0.tgz","fileCount":14,"integrity":"sha512-9mk8h+9sZRQHgu7potPEYN3NQVFDZn2Et0vFVwyReo0xrjsEWklS6NrHuAvZc50YTQ2mxLSYnUHZ01Cb5R6Ntg==","signatures":[{"sig":"MEYCIQDwthuaNTfoQwg7NrTMMkQ+et/DLL0VCnQG8+bGylgP1QIhAKX04WUYGd+41iSGyB8Z6+qUfZgZtXVh4stDULD6/UAo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8l8IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra8g/9FMd2pHj9KKygQfew2tkn3a4A5VAssTgZbSAX0d5ElWZF/Huo\r\nTF74so+sqA4Gk8imGanXfmvGcyaz7eQFlpwCMktHXxfyqF1uHsE98Da9+H6U\r\n2ELESGoS/42xUg0XFXVWHNbrftNwRYgtCV8IMu5RVrWNwU/ktRk0CqD4GS7c\r\ncPaWepT4oJIeSWsvgG0pXDUjOc4o7nETBELeb9srJF/pOjafkVCNcV3AU0Xy\r\nZP3Hc2amba7zWfRLBweNnh6S66h84upTfNYE1Yl7uYIFiBOZe5P/wH+1FIzg\r\nIhULf9MkdNnVtE/zLsq6cEVpmzIsklTH21t+DUyPp1scYZ1mIq9UsvAi0MGf\r\nzfWHObrqHV6GTRvxHo30Sl61BoOZN+Mm8+irmGoHE2jndbE409Rga0LBbIUx\r\nVv73ZqExjtH57oPR9RtbSIpiQliDB9htX3GfRYGpwE0UkEz2rQMJsXQfVImE\r\n6UczBzV2YxDJShPi/AEcJyuvb6eV6FMchb+zk20ONp30d9Obd5ROQu6qaDn8\r\nl0T9CtRP2vd+xO/OSFPLsDEYpphNfrCeP12QhXBygAS7haKRa1MXIse0EgKF\r\nJ2n9ZSFODi++4+uVWCkmpU9CTLqOvrN7D+bToZix4fAAqMdzPi/6RivQcnJo\r\n6pua1dKVjMw/6Tlg80JeuW7t1GKxqj7Zspg=\r\n=snUF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.cjs","type":"module","unpkg":"./dist/index.umd.js","module":"./dist/index.module.js","source":"src/index.ts","exports":{"default":"./dist/index.modern.js","require":"./dist/index.cjs"},"gitHead":"bceb71ade62393f2819d0fcb9bd608950c889670","scripts":{"dev":"microbundle watch","build":"microbundle"},"typings":"dist/index","_npmUser":{"name":"dwilt","email":"dwilt4rville@gmail.com"},"repository":{"url":"git+https://github.com/AirLabsTeam/react-memoized-context.git","type":"git"},"_npmVersion":"8.11.0","description":"<h1 align=\"center\">React Memoized Context</h1> <p align=\"center\"><i>React Context with Redux-like performance and patterns without installing Redux.</i></p>","directories":{},"_nodeVersion":"16.16.0","dependencies":{"react-fast-compare":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.20.0","prettier":"^2.7.1","typescript":"^4.7.4","microbundle":"^0.15.0","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","@typescript-eslint/parser":"^5.31.0","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-memoized-context_1.0.0_1660051208559_0.27026997006979436","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@air/react-memoized-context","version":"1.0.1","author":{"name":"Air Labs, Inc."},"_id":"@air/react-memoized-context@1.0.1","maintainers":[{"name":"andytran","email":"hello@andytran.me"},{"name":"tomasz_czura","email":"tomasz@air.inc"},{"name":"airdev","email":"dev@air.inc"},{"name":"madisondbrown","email":"madison@air.inc"},{"name":"stewart-air","email":"stewart@air.inc"},{"name":"marcusair","email":"marcus@air.inc"},{"name":"tstrand","email":"tyler@air.inc"},{"name":"sazid-air","email":"sazid@air.inc"},{"name":"rana.air","email":"rana@air.inc"},{"name":"cgatesman","email":"chad@air.inc"},{"name":"toby-air","email":"toby@air.inc"},{"name":"guaiamum_air","email":"caina@air.inc"},{"name":"airmatt","email":"matt@air.inc"},{"name":"ccongdon","email":"caroline@air.inc"},{"name":"tedchen","email":"ted.chen@air.inc"},{"name":"mjerred.air","email":"michael.jerred@air.inc"},{"name":"holgair","email":"holger@air.inc"},{"name":"kaveh-air","email":"swervogm+air@gmail.com"},{"name":"froch","email":"francis@manafont.net"},{"name":"rolando-air","email":"rolando@air.inc"},{"name":"michael.air","email":"michael.aldridge@air.inc"}],"homepage":"https://github.com/AirLabsTeam/react-memoized-context#readme","bugs":{"url":"https://github.com/AirLabsTeam/react-memoized-context/issues"},"dist":{"shasum":"2ee0c704a21aec74a64bc7a602a7347b06f12c3b","tarball":"https://registry.npmjs.org/@air/react-memoized-context/-/react-memoized-context-1.0.1.tgz","fileCount":14,"integrity":"sha512-Cj0oRfN7eCIw1fQ/fICbUswCUwmI24nCvJqKuSHqbOWbku2zWoouloBdoaXTVkzZJsIBu0IUCHeJ22eZgtkcHA==","signatures":[{"sig":"MEUCIB15BLeS6T61NCdwAhNuwkIfttdbtTHEKMpqJgnNloJkAiEA2LZ9uUb0FDAmDiIiXz7/S+A22l6pdBpJtbvFm1daxg0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34652},"main":"./dist/index.cjs","type":"module","unpkg":"./dist/index.umd.js","module":"./dist/index.module.js","source":"src/index.ts","exports":{"types":"./dist/index.d.ts","default":"./dist/index.modern.js","require":"./dist/index.cjs"},"gitHead":"d737c670aea607ea333c16367c468cd107cdaaa5","scripts":{"dev":"microbundle watch","build":"microbundle"},"typings":"dist/index","_npmUser":{"name":"andytran","email":"hello@andytran.me"},"repository":{"url":"git+https://github.com/AirLabsTeam/react-memoized-context.git","type":"git"},"_npmVersion":"8.15.0","description":"<h1 align=\"center\">React Memoized Context</h1> <p align=\"center\"><i>React Context with Redux-like performance and patterns without installing Redux.</i></p>","directories":{},"_nodeVersion":"16.14.0","dependencies":{"react-fast-compare":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.20.0","prettier":"^2.7.1","typescript":"^4.7.4","microbundle":"^0.15.0","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","@typescript-eslint/parser":"^5.31.0","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-memoized-context_1.0.1_1740778070367_0.5720406820494512","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@air/react-memoized-context","version":"1.0.2","author":{"name":"Air Labs, Inc."},"license":"MIT","_id":"@air/react-memoized-context@1.0.2","maintainers":[{"name":"andytran","email":"hello@andytran.me"},{"name":"tomasz_czura","email":"tomasz@air.inc"},{"name":"airdev","email":"dev@air.inc"},{"name":"madisondbrown","email":"madison@air.inc"},{"name":"stewart-air","email":"stewart@air.inc"},{"name":"marcusair","email":"marcus@air.inc"},{"name":"tstrand","email":"tyler@air.inc"},{"name":"sazid-air","email":"sazid@air.inc"},{"name":"rana.air","email":"rana@air.inc"},{"name":"cgatesman","email":"chad@air.inc"},{"name":"toby-air","email":"toby@air.inc"},{"name":"guaiamum_air","email":"caina@air.inc"},{"name":"airmatt","email":"matt@air.inc"},{"name":"ccongdon","email":"caroline@air.inc"},{"name":"tedchen","email":"ted.chen@air.inc"},{"name":"mjerred.air","email":"michael.jerred@air.inc"},{"name":"holgair","email":"holger@air.inc"},{"name":"kaveh-air","email":"swervogm+air@gmail.com"},{"name":"froch","email":"francis@manafont.net"},{"name":"rolando-air","email":"rolando@air.inc"},{"name":"michael.air","email":"michael.aldridge@air.inc"}],"dist":{"shasum":"1459b2253b4afd1acfc21d9bfc50d3b9eef661e1","tarball":"https://registry.npmjs.org/@air/react-memoized-context/-/react-memoized-context-1.0.2.tgz","fileCount":17,"integrity":"sha512-Li00MLWkGxgxPUd85QRvSU6Ld+9EiU2cwl2sVO+MKrvMRMPwtKDFsIT9m/lfGZGw96Ziwa8ir6iA3NcxRkqilA==","signatures":[{"sig":"MEUCIF+8HPpmdtNVOkRfaPm8bCpdOQz8nlAS+skkGyzviha3AiEA8n1CZHCACZRL7y4X+ihDy4rUHCj52XMmQJd+lF0iO0g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34573},"main":"./dist/index.cjs","type":"module","unpkg":"./dist/index.umd.js","module":"./dist/index.module.js","source":"src/index.ts","exports":{"types":"./dist/index.d.ts","default":"./dist/index.modern.js","require":"./dist/index.cjs"},"scripts":{"dev":"microbundle watch","build":"microbundle"},"typings":"dist/index","_npmUser":{"name":"andytran","email":"hello@andytran.me"},"repository":{"url":"https://github.com/AirLabsTeam/react-memoized-context.git","type":"git"},"description":"- Use your React Context without the additional re-renders in the consumers - Ability to read values out of context \"on-the-fly\" - useful in callbacks so you don't have to bind the UI to a context value change just to use the value in a callback - Redux-l","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2022 Air\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","dependencies":{"react-fast-compare":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.20.0","prettier":"^2.7.1","typescript":"^4.7.4","microbundle":"^0.15.0","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","@typescript-eslint/parser":"^5.31.0","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-memoized-context_1.0.2_1741081044268_0.568068137247973","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2022-08-09T13:20:08.500Z","modified":"2026-09-01T14:26:44.190Z","1.0.0":"2022-08-09T13:20:08.780Z","1.0.1":"2025-02-28T21:27:50.551Z","1.0.2":"2025-03-04T09:37:24.475Z"},"author":{"name":"Air Labs, Inc."},"license":"MIT","repository":{"url":"https://github.com/AirLabsTeam/react-memoized-context.git","type":"git"},"description":"- Use your React Context without the additional re-renders in the consumers - Ability to read values out of context \"on-the-fly\" - useful in callbacks so you don't have to bind the UI to a context value change just to use the value in a callback - Redux-l","maintainers":[{"email":"lennox.gilbert@air.inc","name":"lennoxgilbert"},{"email":"tomasz@air.inc","name":"tomasz_czura"},{"email":"meenarishabh35@gmail.com","name":"riashabh"},{"email":"dev@air.inc","name":"airdev"},{"email":"chase@air.inc","name":"chase-air"},{"email":"stewart@air.inc","name":"stewart-air"},{"email":"marcus@air.inc","name":"marcusair"},{"email":"tyler@air.inc","name":"tstrand"},{"email":"matt.quintanilla@air.inc","name":"mattair"},{"email":"sazid@air.inc","name":"sazid-air"},{"email":"chad@air.inc","name":"cgatesman"},{"email":"dmytro.sheiko@air.inc","name":"dmytro.sheiko"},{"email":"federico.peralta@air.inc","name":"fperaltaairinc"},{"email":"matt@air.inc","name":"airmatt"},{"email":"caroline@air.inc","name":"ccongdon"},{"email":"dwilt4rville@gmail.com","name":"dwilt"},{"email":"ted.chen@air.inc","name":"tedchen"},{"email":"jarrod.spillers@air.inc","name":"jarrod.spillers"},{"email":"charlotte.maguy@air.inc","name":"charlottemaguy"},{"email":"kaveh@air.inc","name":"kaveh-air"},{"email":"meghan.canale@air.inc","name":"meghan4air"},{"email":"ariana.ross@air.inc","name":"arianaross"},{"email":"jeremiah.chaney@air.inc","name":"jeremiahchaney-air"},{"email":"christian.rivera@air.inc","name":"christian-rivera"},{"email":"hardik.shah@air.inc","name":"shardik95"},{"email":"huangadam9@gmail.com","name":"adamhuang03"},{"email":"dmitry.petrov@air.inc","name":"dmitryatair"},{"email":"brucerodrigues6@gmail.com","name":"brucerodrigues"},{"email":"ashar.malik@air.inc","name":"asharmalikair"},{"email":"bernardo.lopes@air.inc","name":"blopes-air"},{"email":"rolando@air.inc","name":"rolando-air"},{"email":"michael.aldridge@air.inc","name":"michael.air"},{"email":"madison@air.inc","name":"madisondbrown"},{"email":"colin@air.inc","name":"cmbullock-air"},{"email":"adam.christian@air.inc","name":"admc-air"},{"email":"mario@air.inc","name":"mario-at-air"},{"email":"lizz@air.inc","name":"lizznagengast"},{"email":"brady@air.inc","name":"bradybrown"},{"email":"josefin@air.inc","name":"josefin.agerblad"},{"email":"ping@air.inc","name":"pingma"}],"readme":"<h1 align=\"center\">React Memoized Context</h1>\n<p align=\"center\"><i>React Context with Redux-like performance and patterns without installing Redux.</i></p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@air/react-memoized-context\">\n    <img src=\"https://img.shields.io/npm/v/@air/react-memoized-context?color=2E77FF\" alt=\"size\" />\n  </a>\n  <img alt=\"size\" src=\"https://img.shields.io/bundlephobia/min/@air/react-memoized-context\" />\n</p>\n\n## ✨ Features <a name=\"features\"></a>\n\n- Use your React Context without the additional re-renders in the consumers\n- Ability to read values out of context \"on-the-fly\" - useful in callbacks so you don't have to bind the UI to a context value change just to use the value in a callback\n- Redux-like pattern (reducer, actions, and selectors)\n- Built with TypeScript\n\n## About\nHere at [Air](https://air.inc), we needed a way to store _multiple_ instances of complex global state (what React Context API does) but with the performance of Redux. `react-memoized-context` solves this problem.\n\n### Why not React Context?\nA React Context provider renders _all_ consumers every time it's `value` changes - even if the component isn't using a property on the `value` (if it's an object). This can cause lots of performance issues and the community is [trying](https://github.com/reactjs/rfcs/pull/119) to [solve it](https://github.com/dai-shi/use-context-selector). We've looked at these other solutions but they're either not ready, have too many bugs or lacked features (like reading values on the fly) so we decided to roll our own.\n\n### Why not Redux?\nRedux is great as a global store when multiple components want to read and write to a _single_ centralized value. But when you want to have _multiple_ global values with the same structure, Redux isn't as flexible because you need to duplicate your reducers, actions, and selectors. That's where React Context is nice because you can just wrap around another Provider.\n\n## Install\n\n```bash\nnpm install --save @air/react-memoized-context\n```\n```bash\nyarn add @air/react-memoized-context\n```\n\n## Usage\n\n1. Create types for your context:\n\n   - create type for value, which you want to store:\n       ```typescript\n       export interface User {\n         id: string;\n         name: string;\n         score: number;\n       }\n    \n       export interface UsersTeamContextValue {\n         users: User[];\n       }\n       ```\n   - create type for actions you want to provide to update value:\n       ```typescript\n       export interface UsersTeamContextActions {\n         addUser: (user: User) => void;\n         assignScore: (userId: User['id'], score: number) => void;\n       }\n       ```\n   - create type for your context - remember to extend `MemoizedContextType`:\n       ```typescript\n       export interface UsersTeamContextType extends MemoizedContextType<UsersTeamContextValue>, UsersTeamContextActionsType {}\n       ```\n   - create default value for your context:\n     ```typescript\n     export const defaultUsersTeamContextValue: UsersTeamContextType = {\n       ...defaultMemoizedContextValue,\n       getValue: () => ({\n         users: [],\n       }),\n       addUser: () => {},\n       assignScore: () => {},\n      };\n      ```\n   - create types for your actions - you will use them to modify context value:\n     ```typescript  \n     export interface AddUserAction extends MemoizedContextAction {\n       type: 'addUser';\n       data?: { user: User };\n     }\n  \n     export interface AssignScoreAction extends MemoizedContextAction {\n       type: 'assignScore';\n       data?: { userId: User['id']; score: number };\n     }\n  \n     export type UserTeamContextActions = AddUserAction | AssignScoreAction;\n     ```\n2. Create your context:\n\n    ```typescript\n    const UsersTeamContext = createContext<UsersTeamContextType>(defaultUsersTeamContextValue);\n    \n    const useUsersTeamContext = () => useContext(UsersTeamContext);\n    ```\n\n3. Create your dispatch method. It should work as redux dispatch - takes an action, modifies state value and returns a new state:\n    ```typescript\n    export const usersTeamContextDispatch = (state: UsersTeamContextValue, action: UserTeamContextActions) => {\n      switch (action.type) {\n        case 'assignScore':\n          return {\n            ...state,\n            users: state.users.map((user) => {\n              if (user.id === action.data?.userId) {\n                return {\n                  ...user,\n                  score: action.data?.score ?? 0,\n                };\n              }\n              return user;\n            }),\n          };\n        case 'addUser':\n          return {\n            ...state,\n            users: action.data ? [...state.users, action.data.user] : state.users,\n          };\n      }\n    };\n    ```\n4. Create your provider:\n    ```typescript\n    export const UsersTeamProvider = ({ children }: PropsWithChildren<{}>) => {\n      \n      const { contextValue } = useMemoizedContextProvider<UsersTeamContextValue>(\n        // provide default value for your context\n        {\n          users: [],\n        },\n        usersTeamContextDispatch,\n      );\n    \n      // create methods you want to expose to clients\n      const addUser = useCallback((user: User) => contextValue.dispatch({ type: 'addUser', data: { user } }), [contextValue]);\n    \n      const assignScore = useCallback(\n        (userId: User['id'], score: number) => contextValue.dispatch({ type: 'assignScore', data: { userId, score } }),\n        [contextValue],\n      );\n    \n      // memoize your final value that will be available for clients\n      // just return what's in contextValue and add your methods\n      const value = useMemo<UsersTeamContextType>(\n        () => ({\n          ...contextValue,\n          addUser,\n          assignScore,\n        }),\n        [addUser, assignScore, contextValue],\n      );\n    \n      return <UsersTeamContext.Provider value={value}>{children}</UsersTeamContext.Provider>;\n    };\n    ```\n   \n5. To retrieve data from context, you need selectors:\n    ```typescript\n    export const usersTeamUsersSelector = (state: UsersTeamContextValue) => state.users;\n    ```\n   \n    usage in component:\n    ```typescript\n    const context = useUsersTeamContext();\n    // pass context to useMemoizedContextSelector\n    const users = useMemoizedContextSelector(context, usersTeamUsersSelector);\n    ```\n   \n    to simplify it, you can create a helper:\n    ```typescript\n    export function useUsersTeamContextSelector<T>(selector: (st: UsersTeamContextValue) => T) {\n      const context = useUsersTeamContext();\n      return useMemoizedContextSelector(context, selector);\n    }\n    \n    ```\n    then, to retrieve `users` from context you can do:\n\n    ```typescript\n    const users = useUsersTeamContextSelector(usersTeamUsersSelector);\n    ```\n\n6. Start using your context!\n\n    Wrap your components with your `Provider` component, as you do with React Context:\n\n    ```react\n    <UsersTeamProvider>\n        <UsersTeam name=\"Team 1\" />\n    </UsersTeamProvider>\n    ```\n   \n    To modify context value, use any of your actions:\n\n    ```typescript\n    import { useUsersTeamContextSelector } from \"./usersTeamContext\";\n    \n    const { addUser } = useUsersTeamContext()\n    \n    const onClick = () => {\n      addUser({ name: 'John' })\n    }\n    \n    ```\n\n    You can read context values on the fly if you need. For example, we will create a user with `users.length` as id. We can use `usersTeamUsersSelector`, but the component would be rerendered every time when any user changes. We don't want that - we need just `users` length. We could create a selector that gets users length, but again - everytime we add a user, the component will rerender. For us, it's enough to know users length by the time we create a user:\n    ```typescript\n     // get whole context value - it will not cause any rerender!\n     const contextValue = useUsersTeamContext();\n    \n      const addNewUser = () => {\n        // read users array when we need it\n        const users = contextValue.getValue().users;\n        // call addUser action to add a new user\n        contextValue.addUser({ id: users.length + 1, name: userName, score: 0 });\n      };\n    ```\n\n\n\n## Codesandbox\n\nYou can play with the example using codesandbox:\nhttps://codesandbox.io/s/boring-morning-j44i9p\n","readmeFilename":"README.md"}