{"id":15433642,"url":"https://github.com/mskelton/lazy-context","last_synced_at":"2026-01-24T02:09:04.276Z","repository":{"id":202841828,"uuid":"708263697","full_name":"mskelton/lazy-context","owner":"mskelton","description":"A thin layer on top of React context that supports \"lazy subscription\" to only re-render when the data you care about changes.","archived":false,"fork":false,"pushed_at":"2024-02-17T02:53:46.000Z","size":497,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-18T08:17:47.014Z","etag":null,"topics":["lazy","react","react-context"],"latest_commit_sha":null,"homepage":"https://npm.im/lazy-context","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mskelton.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2023-10-22T02:44:40.000Z","updated_at":"2023-10-26T21:28:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf77388d-ab47-4e95-853a-5808c66afae0","html_url":"https://github.com/mskelton/lazy-context","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":"0.16666666666666663","last_synced_commit":"5d7451fbff93e4cc79b75fae63d34460dfc14e8a"},"previous_names":["mskelton/lazy-context","mskelton/react-lazy-context"],"tags_count":4,"template":false,"template_full_name":"mskelton/npm-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Flazy-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Flazy-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Flazy-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Flazy-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mskelton","download_url":"https://codeload.github.com/mskelton/lazy-context/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249757786,"owners_count":21321389,"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":["lazy","react","react-context"],"created_at":"2024-10-01T18:34:50.644Z","updated_at":"2026-01-24T02:08:59.255Z","avatar_url":"https://github.com/mskelton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lazy Context\n\n[![Build status](https://github.com/mskelton/lazy-context/workflows/Build/badge.svg)](https://github.com/mskelton/npm-template/actions)\n[![npm](https://img.shields.io/npm/v/lazy-context)](https://www.npmjs.com/package/lazy-context)\n\nA thin layer on top of React context that supports \"lazy subscription\" to only\nre-render when the data you care about changes.\n\n## Installation\n\n**npm**\n\n```bash\nnpm install lazy-context\n```\n\n**Yarn**\n\n```bash\nyarn add lazy-context\n```\n\n**pnpm**\n\n```bash\npnpm add lazy-context\n```\n\n**bun**\n\n```bash\nbun add lazy-context\n```\n\n## How does it work?\n\nOne of the challenges with React context is that it's all or nothing when you\nupdate. If you have an object with ten properties and a child component only\nneeds one of those properties, React will still re-render the child if any of\nthe other nine properties change. In most cases this is fine, but when fine\ntuning performance where ever re-render matters, it starts to break down.\n\nThat's where React Lazy Context comes in. It will observe which keys you use\nfrom the context object and only re-render the component when those specific\nkeys change, ignoring unrelated updates.\n\n## Example Usage\n\n```javascript\nimport React, { memo } from \"react\"\nimport { createLazyContext } from \"lazy-context\"\n\nconst [useUserContext, UserContextProvider] = createLazyContext({\n  name: \"Mark Skelton\",\n  hobbies: [],\n})\n\n// UserCard will only re-render when `name` changes. Changes to `hobbies` will\n// not trigger a re-render.\nconst UserCard = memo(function UserCard() {\n  const { name } = useUserContext()\n\n  return \u003cp\u003e{name}\u003c/p\u003e\n})\n\nfunction Page({ children }) {\n  return (\n    \u003cUserContextProvider value={{ name: \"Brad Williams\", hobbies: [] }}\u003e\n      {children}\n    \u003c/UserContextProvider\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmskelton%2Flazy-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmskelton%2Flazy-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmskelton%2Flazy-context/lists"}