How to use the most updated state/value inside a 3rd party event handler?

Question

Given something like:

function MapControl() {
  const [countries, setCountries] = useContext(CountriesContext)
  useEffect( () => {
    ThirdPartyApi.OnSelectCountry((country) => {
      setCountries([...countries, country])
    })
  })

  return (<ThirdPartyApi.Map />)
}

I have the problem that the call to setCountries doesn't work as expected, because the countries array is not updated from the context of the custom event handler provided by ThirdPartyApi.

What is a clean way to model this? It's possible to just have a local mutable array that I update in the event handler, but that wouldn't pick up any changes to countries from other components, so feels doomed to cause problems.

Answer 1

You can use a functional update to modify your state using the latest value instead of capturing it from the stale closure:

function MapControl() {
  const [countries, setCountries] = useContext(CountriesContext)

  useEffect( () => {
    ThirdPartyApi.OnSelectCountry((country) => {
      setCountries((prev) => [...prev, country])
    })

    return () => {
      // unregister event handler
    }
  }, [])

  return (
    <ThirdPartyApi.Map />
  )
}

Also make sure to specify your dependencies for useEffect() so that you're not triggering your side-effect on every re-render. In this case, your side effect doesn't have any dependencies, so it should be empty [].

Lastly, make sure to clean up your effect when the component unmounts. In this case you need to unregister your event handler within the returned callback from useEffect().