Skip to content

Latest commit

 

History

History
31 lines (22 loc) · 1.89 KB

README.md

File metadata and controls

31 lines (22 loc) · 1.89 KB

CI & Release npm version

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