Ponyfill of the experimental
React.useEffectEvent
hook
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])
}