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

Last update: May 12, 2022

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.

Installation

npm install react-use-event-hook

Usage

(this example was copied from the RFC)

You can wrap any event handler into useEvent.

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

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

  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

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

GitHub

https://github.com/scottrippey/react-use-event-hook
You might also like...

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

Jan 3, 2022

🤿 React hooks, except using deep comparison on the inputs, not reference equality

Use Deep Compare Use Deep Compare - React hooks, except using deep comparison on the inputs, not reference equality. Read about Hooks feature. Install

May 16, 2022

🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality

🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality

use-deep-compare-effect 🐋 It's React's useEffect hook, except using deep comparison on the inputs, not reference equality WARNING: Please only use th

May 13, 2022

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

Nov 27, 2021

Reference mono repo that contains React based micro frontends using webpack's module federation feature

Micro Frontends with Webpack's Module Federation This repo contains a React based demo bank application which is built using micro frontend architectu

Apr 13, 2022

Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl

react-native-page-control Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl Installation $ npm install react-nativ

Oct 7, 2021

React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Mar 1, 2020

Import SVG files in your React Native project the same way that you would in a Web application.

Import SVG files in your React Native project the same way that you would in a Web application.

react-native-svg-transformer React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a

May 13, 2022

Mobile, desktop and website Apps with the same code

Mobile, desktop and website Apps with the same code

Mobile, desktop and website Apps with the same code This project shows how the source code can be architectured to run on multiple devices. As of now,

May 11, 2022

A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Monorepo template Get Started Run the following command to install all the dependencies in the right location yarn lerna bootstrap yarn workspace @mar

Jan 9, 2022

Template combile React Native and react-native-web with same structure

Template combile React Native and react-native-web with same structure

React Native Web Template 同构react-native和react-native-web的一个template 为什么要用我 react-native-web官方没有集成react-native的正式方案 这个template是用react-native init创建的项目

Aug 16, 2021

Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

Mar 22, 2022

This is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos.

This is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos.

This is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like

May 15, 2022

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

May 10, 2022

An opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos

An opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos

This is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like box, Dfinity, Filecoin and Crust.

May 9, 2022

The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate The simple but very powerful and incredibly fast state management for React that is based on hooks. Why? • Docs / Samples • Demo application

May 17, 2022

🥢 A minimalist-friendly ~1.3KB routing for React and Preact. Nothing else but HOOKS.

wouter is a tiny router for modern React and Preact apps that relies on Hooks. A router you wanted so bad in your project! Features Zero dependency, o

May 15, 2022

React, but with built-in global state management.

React, but with built-in global state management.

ReactN ReactN is an extension of React that includes global state management. It treats global state as if it were built into React itself -- without

May 10, 2022

A lightweight but complete datetime picker react component.

react-datetime A date and time picker in the same React.js component. It can be used as a datepicker, timepicker or both at the same time. It is highl

May 14, 2022
Comments
  • 1. chore: don't show a warning about using useLayoutEffect in SSR

    This PR fixes a warning when using useEvent in SSR:

    Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

    Reviewed by lynxtaa at 2022-05-11 09:02
Almost same to useEffect, but not deferred.

useAction Almost same to useEffect, but not deferred. Why useAction? Unlike componentDidMount and componentDidUpdate, the function passed to useEffect

Feb 5, 2022
React Hook that returns information about scroll speed, time, distance, direction and more

Scroll Data Hook The useScrollData hook returns information about scroll speed, distance, direction and more. Useful when building dynamic navigation

May 6, 2022
🤿 React hooks, except using deep comparison on the inputs, not reference equality

Use Deep Compare Use Deep Compare - React hooks, except using deep comparison on the inputs, not reference equality. Read about Hooks feature. Install

May 16, 2022
🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality
🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality

use-deep-compare-effect ?? It's React's useEffect hook, except using deep comparison on the inputs, not reference equality WARNING: Please only use th

May 13, 2022
The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate The simple but very powerful and incredibly fast state management for React that is based on hooks. Why? • Docs / Samples • Demo application

May 17, 2022
This GitHub action activates when a contributor raises a PR. It comments and reacts to the PR. Moreover, assigns the PR to the creator.

Pull Request Action ?? This action provides the following functionaliy for the Github Actions users: Auto comment on opening a new PR. Auto react to t

Jan 11, 2022
UsePureCallback - useCallback doing right for react

usePureCallback This is not a NPM package, this is simple snipet to copy paste i

May 5, 2022
Almost same to useEffect, but not deferred.

useAction Almost same to useEffect, but not deferred. Why useAction? Unlike componentDidMount and componentDidUpdate, the function passed to useEffect

Feb 5, 2022
React Hook that returns information about scroll speed, time, distance, direction and more

Scroll Data Hook The useScrollData hook returns information about scroll speed, distance, direction and more. Useful when building dynamic navigation

May 6, 2022
Stable bi-directional infinite scroll React component
Stable bi-directional infinite scroll React component

Stable bi-directional infinite scroll React component. Load additional data from both ends of a container while maintaining current view. Used for chat, timeline, feed views.

Feb 9, 2022