@radix-ui/react-use-callback-ref

What is @radix-ui/react-use-callback-ref?

@radix-ui/react-use-callback-ref is a utility hook for React that allows you to create a stable callback reference that always points to the latest version of a function. This is particularly useful in scenarios where you need to pass a callback to a child component or a third-party library, and you want to ensure that the callback always has access to the latest state or props.

What are @radix-ui/react-use-callback-ref's main functionalities?

Stable Callback Reference

This feature allows you to create a stable callback reference that always points to the latest version of a function. In this example, the `handleClick` callback will always log the current count, even if the state changes.

import { useCallbackRef } from '@radix-ui/react-use-callback-ref';

function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = useCallbackRef(() => {
    console.log('Current count:', count);
  });

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClick}>Log Count</button>
    </div>
  );
}

Other packages similar to @radix-ui/react-use-callback-ref

use-latest

The `use-latest` package provides a hook that returns a mutable ref object containing the latest value. This is similar to `@radix-ui/react-use-callback-ref` in that it helps to keep a stable reference to the latest value, but it is more general-purpose and can be used for any value, not just functions.

use-event-callback

The `use-event-callback` package provides a hook that returns a stable callback reference, similar to `@radix-ui/react-use-callback-ref`. It ensures that the callback always has access to the latest state or props, making it useful for event handlers and other callback scenarios.

react-use

The `react-use` package is a collection of essential React hooks, including `useLatest` and `useEventCallback`, which provide similar functionality to `@radix-ui/react-use-callback-ref`. It offers a broader range of hooks for various use cases, making it a more comprehensive utility library.

README

react-use-callback-ref

Installation

$ yarn add @radix-ui/react-use-callback-ref
# or
$ npm install @radix-ui/react-use-callback-ref

Usage

This is an internal utility, not intended for public usage.