Socket
Socket
Sign inDemoInstall

use-ref-from

Package Overview
Dependencies
6
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    use-ref-from

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


Version published
Maintainers
1
Install size
1.41 MB
Created

Changelog

Source

[0.1.0] - 2024-04-01

Changed

Readme

Source

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.

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.

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.

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

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

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.

Keywords

FAQs

Last updated on 01 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc