use-effect-event

use-effect-event

Ponyfill of the experimental React.useEffectEvent hook

Usage

[!IMPORTANT] Make sure you read about the limitations and understand them before you start using this hook, it's not a silver bullet.

This package implements the same API as the experimental React.useEffectEvent hook, based on its implementation in Bluesky. The only difference is that instead of installing an experimental build of React, you can use this package as a ponyfill. Here's an example, from the official docs, that shows how it can be used to log whenever url changes, and still access the latest value of numberOfItems without needing to resort to useRef proxying:

// import {useEffectEvent} from 'react'
import {useEffectEvent} from 'use-effect-event'

function Page({url}) {
  const {items} = useContext(ShoppingCartContext)
  const numberOfItems = items.length

  const onVisit = useEffectEvent((visitedUrl) => {
    logVisit(visitedUrl, numberOfItems)
  })

  useEffect(() => {
    onVisit(url)
  }, [url])
}

Usage with eslint-plugin-react-hooks

In order to use this hook with eslint-plugin-react-hooks, install eslint-plugin-react-hooks@experimental:

  "devDependencies": {
    "eslint-plugin-react-hooks": "experimental"
  }

The experimental version of the react-hooks ESLint plugin checks that Effect Events are used according to the rules:

• useEffectEvent functions are not passed between components (react-hooks/rules-of-hooks)
• useEffectEvent functions are excluded from the dependency arrays of useEffect calls (react-hooks/exhaustive-deps)
  • this corrects the behavior of the stable version, which erroneously requires that useEffectEvent functions are included as effect dependencies.