# use-ref-from

> React.useRef with an immediate setter and read-only value.

Latest version **0.2.1** (published 2025-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-ref-from
pnpm add use-ref-from
yarn add use-ref-from
bun add use-ref-from
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2025-12-30 |
| First published | 2023-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 4 |
| Author | William Wong |
| Maintainers | compulim |
| Keywords | react, react-hook, react-hooks |

## Links

- npm: https://www.npmjs.com/package/use-ref-from
- Repository: https://github.com/compulim/use-ref-from
- Homepage: https://github.com/compulim/use-ref-from#readme
- Issues: https://github.com/compulim/use-ref-from/issues
- npm.io page: https://npm.io/package/use-ref-from

## Dependencies (1)

- [use-ref-from](https://npm.io/package/use-ref-from.md) ^0.2.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2025-12-30
- 0.2.2-main.202512302308.0da6c17 (main) — 2025-12-30
- 0.2.2-main.202512301837.b350325 — 2025-12-30
- 0.2.1-main.202512301220.5cb5f42 — 2025-12-30
- 0.2.1-main.202512300630.55a0254 — 2025-12-30
- 0.2.1-main.202512240752.3b94b54 — 2025-12-24
- 0.2.0 — 2025-12-24
- 0.2.0-main.202512240718.4f22b2b — 2025-12-24
- 0.2.0-main.202512240709.28cd1eb — 2025-12-24
- 0.2.0-main.202512240701.f116b46 — 2025-12-24
- 0.2.0-main.202512160149.f6dfa7a — 2025-12-16
- 0.2.0-main.d192b65 — 2024-12-06
- 0.2.0-main.9e6b25a — 2024-10-13
- 0.2.0-main.c242bb7 — 2024-10-13
- 0.2.0-main.feb03ee — 2024-10-11
- … 55 more at https://npm.io/package/use-ref-from/versions

## README

# `use-ref-from`

`React.useRef` with an immediate setter and read-only value.

## Background

Aids `useCallback` and `useMemo` for better memoization, reduce wasted render, and properly signal render loop.

By using `useRefFrom`, React component developers can make sure their custom hooks are properly memoized.

## How to use

Following examples shows how `useRefFrom` help decoupling mutation for callbacks.

### Without using `useRefFrom`

Return function from `useCallback` could change on every render.

```tsx
const MyComponent = ({ message }: { message: string }) => {
  // `handleClick` changes on every update to `message`.
  const handleClick = useCallback(() => {
    alert(message);
  }, [message]);

  return <button onClick={handleClick}>Click me</button>;
};
```

### Decoupling mutation without `useRefFrom`

Decoupling `message` from `useCallback` by `useRef`.

```tsx
const MyComponent = ({ message }: { message: string }) => {
  const messageRef = useRef<string>();

  messageRef.current = message;

  // `handleClick` stay intact regardless of `message`.
  const handleClick = useCallback(() => {
    // `messageRef.current` is `string | null`, unsafe casting is required.
    alert(messageRef.current as string);
  }, [messageRef]);

  return <button onClick={handleClick}>Click me</button>;
};
```

### Decoupling mutation with `useRefFrom`

Decoupling `message` from `useCallback` by `useRefFrom`. It also helps typing and immutability.

```tsx
const MyComponent = ({ message }: { message: string }) => {
  const messageRef = useRefFrom<string>(message);

  // `handleClick` stay intact regardless of `message`.
  const handleClick = useCallback(() => {
    // `messageRef.current` is `readonly string`.
    alert(messageRef.current);

    // ❌ `messageRef.current` is read-only. The following line will fail at compile-time.
    messageRef.current = 'Hello, World!'.
  }, [messageRef]);

  return <button onClick={handleClick}>Click me</button>;
};
```

## API

```ts
function useRefFrom<T>(value: T): RefObject<T> & { get current(): T };
```

## Behaviors

### Ref object cannot be set

The `RefObject<T>` returned by `useRefFrom()` will be read-only and cannot be set. This is by design.

### Requires TypeScript 4.3

If 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.

```
node_modules/use-ref-from/lib/types/useRefFrom.d.ts:3:5 - error TS1131: Property or signature expected.

3     get current(): T;
      ~~~
```

## Contributions

Like us? [Star](https://github.com/compulim/use-ref-from/stargazers) us.

Want to make it better? [File](https://github.com/compulim/use-ref-from/issues) us an issue.

Don't like something you see? [Submit](https://github.com/compulim/use-ref-from/pulls) a pull request.

---
_Source: https://npm.io/package/use-ref-from · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._