{"id":18563255,"url":"https://github.com/compulim/use-ref-from","last_synced_at":"2025-12-24T09:46:53.316Z","repository":{"id":65153720,"uuid":"584661624","full_name":"compulim/use-ref-from","owner":"compulim","description":"React.useRef with an immediate setter and read-only value.","archived":false,"fork":false,"pushed_at":"2024-04-01T04:07:28.000Z","size":641,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T05:53:19.804Z","etag":null,"topics":["hooks","react","react-hooks","use-ref"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/use-ref-from/","language":"JavaScript","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/compulim.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-01-03T07:27:58.000Z","updated_at":"2024-05-30T04:22:22.451Z","dependencies_parsed_at":"2023-02-15T16:01:43.129Z","dependency_job_id":"77fa98cc-01b8-4088-adb9-9e757430ce0f","html_url":"https://github.com/compulim/use-ref-from","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fuse-ref-from","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fuse-ref-from/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fuse-ref-from/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fuse-ref-from/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/compulim","download_url":"https://codeload.github.com/compulim/use-ref-from/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223424467,"owners_count":17142744,"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":["hooks","react","react-hooks","use-ref"],"created_at":"2024-11-06T22:12:13.162Z","updated_at":"2025-12-24T09:46:53.297Z","avatar_url":"https://github.com/compulim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `use-ref-from`\n\n`React.useRef` with an immediate setter and read-only value.\n\n## Background\n\nAids `useCallback` and `useMemo` for better memoization, reduce wasted render, and properly signal render loop.\n\nBy using `useRefFrom`, React component developers can make sure their custom hooks are properly memoized.\n\n## How to use\n\nFollowing examples shows how `useRefFrom` help decoupling mutation for callbacks.\n\n### Without using `useRefFrom`\n\nReturn function from `useCallback` could change on every render.\n\n```tsx\nconst MyComponent = ({ message }: { message: string }) =\u003e {\n  // `handleClick` changes on every update to `message`.\n  const handleClick = useCallback(() =\u003e {\n    alert(message);\n  }, [message]);\n\n  return \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e;\n};\n```\n\n### Decoupling mutation without `useRefFrom`\n\nDecoupling `message` from `useCallback` by `useRef`.\n\n```tsx\nconst MyComponent = ({ message }: { message: string }) =\u003e {\n  const messageRef = useRef\u003cstring\u003e();\n\n  messageRef.current = message;\n\n  // `handleClick` stay intact regardless of `message`.\n  const handleClick = useCallback(() =\u003e {\n    // `messageRef.current` is `string | null`, unsafe casting is required.\n    alert(messageRef.current as string);\n  }, [messageRef]);\n\n  return \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e;\n};\n```\n\n### Decoupling mutation with `useRefFrom`\n\nDecoupling `message` from `useCallback` by `useRefFrom`. It also helps typing and immutability.\n\n```tsx\nconst MyComponent = ({ message }: { message: string }) =\u003e {\n  const messageRef = useRefFrom\u003cstring\u003e(message);\n\n  // `handleClick` stay intact regardless of `message`.\n  const handleClick = useCallback(() =\u003e {\n    // `messageRef.current` is `readonly string`.\n    alert(messageRef.current);\n\n    // ❌ `messageRef.current` is read-only. The following line will fail at compile-time.\n    messageRef.current = 'Hello, World!'.\n  }, [messageRef]);\n\n  return \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e;\n};\n```\n\n## API\n\n```ts\nfunction useRefFrom\u003cT\u003e(value: T): RefObject\u003cT\u003e \u0026 { get current(): T };\n```\n\n## Behaviors\n\n### Ref object cannot be set\n\nThe `RefObject\u003cT\u003e` returned by `useRefFrom()` will be read-only and cannot be set. This is by design.\n\n### Requires TypeScript 4.3\n\nIf you see TypeScript compilation error related to `useRefFrom.d.ts`, please make sure you are using [TypeScript 4.3](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html#separate-write-types-on-properties) or up.\n\n```\nnode_modules/use-ref-from/lib/types/useRefFrom.d.ts:3:5 - error TS1131: Property or signature expected.\n\n3     get current(): T;\n      ~~~\n```\n\n## Contributions\n\nLike us? [Star](https://github.com/compulim/use-ref-from/stargazers) us.\n\nWant to make it better? [File](https://github.com/compulim/use-ref-from/issues) us an issue.\n\nDon't like something you see? [Submit](https://github.com/compulim/use-ref-from/pulls) a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Fuse-ref-from","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcompulim%2Fuse-ref-from","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Fuse-ref-from/lists"}