https://github.com/scottrippey/react-use-event-hook

Same as React's useCallback, but returns a stable reference.
https://github.com/scottrippey/react-use-event-hook

react react-memo usecallback useevent useref

Last synced: 5 days ago
JSON representation

Same as React's useCallback, but returns a stable reference.

• Host: GitHub
• URL: https://github.com/scottrippey/react-use-event-hook
• Owner: scottrippey
• License: mit
• Created: 2022-05-05T17:09:09.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-22T05:31:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T17:33:53.185Z (4 months ago)
• Topics: react, react-memo, usecallback, useevent, useref
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-use-event-hook
• Size: 184 KB
• Stars: 221
• Watchers: 4
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-use-event-hook

Same as React's `useCallback`, but returns a stable reference.

This library is a user-land implementation of the `useEvent` hook, [proposed in this RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md).

# Installation

```sh

npm install react-use-event-hook

```

# Usage

(this example was copied from the RFC)

You can wrap any event handler into `useEvent`.

```js

import useEvent from 'react-use-event-hook';

function Chat() {

  const [text, setText] = useState('');

  const onClick = useEvent(() => {

    sendMessage(text);

  });

  return ;

}

```

The code inside `useEvent` “sees” the props/state values at the time of the call. 

The returned function has a stable identity even if the props/state it references change. 

There is no dependency array.

# See more

- [The proposed `useEvent` RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md)

- [A hearty discussion on the naming, and edge-case considerations, of this hook](https://github.com/reactjs/rfcs/pull/220)