{"id":22611561,"url":"https://github.com/benbowes/zustand-context-api-pattern","last_synced_at":"2025-03-28T23:21:54.060Z","repository":{"id":266964665,"uuid":"899892196","full_name":"benbowes/zustand-context-api-pattern","owner":"benbowes","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-08T11:43:11.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-03T09:48:01.988Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benbowes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-07T09:51:42.000Z","updated_at":"2024-12-08T11:43:14.000Z","dependencies_parsed_at":"2024-12-07T10:36:31.093Z","dependency_job_id":null,"html_url":"https://github.com/benbowes/zustand-context-api-pattern","commit_stats":null,"previous_names":["benbowes/zustand-context-api-pattern"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Fzustand-context-api-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Fzustand-context-api-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Fzustand-context-api-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Fzustand-context-api-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benbowes","download_url":"https://codeload.github.com/benbowes/zustand-context-api-pattern/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246112817,"owners_count":20725332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-08T16:12:02.456Z","updated_at":"2025-03-28T23:21:54.035Z","avatar_url":"https://github.com/benbowes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A Zustand + Context API pattern for making use of the best of both worlds.\n\nThis pattern comes from here: https://tkdodo.eu/blog/zustand-and-react-context\n\nAnd I discovered it here from Cosden (https://www.youtube.com/@cosdensolutions): https://www.youtube.com/watch?v=1Fi4hK7L1ec\n\n### Getting started\n\n`npm i`\n\n`npm run dev`\n\nThe main files to look at are `CountProvider.tsx` and `App.tsx`.\n\n## Notes\n\nWhen adding a `\u003cOtherComponentThatDoesNotUseZustand /\u003e` under the context api provider `\u003cCountProvider /\u003e`, the `\u003cOtherComponentThatDoesNotUseZustand /\u003e` does not re-render.\nIt is not affected by changes in state by Zustand, and this is very good!\n\nYou can check the console logs to see the results.\n\nEvery component renders on first load, and this is expected. However, only the components that subcribe to the Zustand store via the `useCountStore` hook re-render when the `CountProvider` is updated via the Zustand commands that update Zustand state.\n\n---\n\n#### What I see as the key benefits of this pattern.\n\n- everything under a context api provider is not unnecessarily re-rendered.\n- testing becomes easier, as you can provide a component that is reliant on Zustand with initial state - so setup and teardown of tests will be easy with this pattern.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenbowes%2Fzustand-context-api-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenbowes%2Fzustand-context-api-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenbowes%2Fzustand-context-api-pattern/lists"}