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])
}