{"id":16483717,"url":"https://github.com/pie6k/use-needed-state","last_synced_at":"2025-02-28T19:45:17.300Z","repository":{"id":57388225,"uuid":"252119759","full_name":"pie6k/use-needed-state","owner":"pie6k","description":"It's like `useState` - but it'll spy what part of the state is actually used during the render and re-render only if needed.","archived":false,"fork":false,"pushed_at":"2020-04-01T08:53:32.000Z","size":11,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T17:02:19.443Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pie6k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-01T08:43:39.000Z","updated_at":"2021-05-05T06:12:41.000Z","dependencies_parsed_at":"2022-08-31T14:31:57.523Z","dependency_job_id":null,"html_url":"https://github.com/pie6k/use-needed-state","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pie6k%2Fuse-needed-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pie6k%2Fuse-needed-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pie6k%2Fuse-needed-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pie6k%2Fuse-needed-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pie6k","download_url":"https://codeload.github.com/pie6k/use-needed-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241215552,"owners_count":19928508,"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-10-11T13:14:49.393Z","updated_at":"2025-02-28T19:45:17.278Z","avatar_url":"https://github.com/pie6k.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-needed-state\n\nIt looks the same as regualr `useState`, but it'll watch what parts of state were actually used during the render. \n\nSo even if you'll update using 'setState', but parts used during the render did not change (are equal) - it'll skip re-render\n\n## example\n\nWe'll create simple component with state that is object with 2 values.\n\nOne is 'loggedUserName' which is some string, and another is 'showLoggedUserInfo' which is boolean indicating if we want to show logged user name or no.\n\nIf 'showLoggedUserInfo' is false - we're not even accessing user name during the render.\n\nIt means that when user name will change while we're not showing it - we don't have to re-render and this is exactly what will happen.\n\n```tsx\nimport React from 'react';\nimport { useNeededState } from 'use-needed-state';\n\ninterface AppInfo {\n  loggedUserName: string;\n  showLoggedUserInfo: boolean;\n}\n\nfunction SomeComponent() {\n  /**\n   * Initialize state the same way as with `useState`\n   */\n  const [appInfo, setAppInfo] = useNeededState\u003cAppInfo\u003e({\n    // name of our user\n    loggedUserName: 'Bob',\n    // indicator telling if we want to show logged user name\n    showLoggedUserInfo: false,\n  });\n\n  /**\n   * If `showLoggedUserInfo` is false - we'll not even use\n   * logged user name during the render, so we \"dont care\" what it is\n   * It means that if loggedUserName will change - we don't have to\n   * re-render as it'll not impact the result of rendering\n   */\n  if (!appInfo.showLoggedUserInfo) {\n    return (\n      \u003cdiv\u003e\n        Hello!\n        {/* if we'll change user name while `showLoggedUserInfo` is false - component will not re-render */}\n        \u003cbutton onClick={changeUserName}\u003eChange user name\u003c/button\u003e\n        \u003cbutton onClick={toggleShowUserInfo}\u003eToggle show user info\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  /**\n   * If showLoggedUserInfo is true - we're actually accessing user name\n   * so now component will re-render if it's changed in the state\n   */\n  return \u003cdiv\u003eHello, {appInfo.loggedUserName}!\u003c/div\u003e;\n\n  function changeUserName() {\n    const newName = window.prompt('New name');\n\n    setAppInfo((state) =\u003e {\n      return { ...state, loggedUserName: newName };\n    });\n  }\n\n  function toggleShowUserInfo() {\n    setAppInfo((state) =\u003e {\n      return { ...state, showLoggedUserInfo: !state.showLoggedUserInfo };\n    });\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpie6k%2Fuse-needed-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpie6k%2Fuse-needed-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpie6k%2Fuse-needed-state/lists"}