javascriptreact-nativeexporeact-navigation

How to avoid multiple event listeners from being attached?

Is the following code going to attach multiple event listeners or will React Native / expo-linking only allow one event listener be attached at a time?

import * as Linking from 'expo-linking'
import { useIsFocused } from '@react-navigation/native'

const MyComponent = () => {
  const isFocused = useIsFocused()

  useEffect(() => {
    fetchData()
    Linking.addEventListener('url', _handleEvent)
  }, [isFocused])

  const fetchData = () => {
    // ...
  }

  const _handleEvent = () => {
    // ...
  }

  return (
    <View><View>
  )
}

Is there are a way to check if an event listener already exists so I can do something like:

useEffect(() => {
  fetchData()
  if(!eventListenerExists){
    Linking.addEventListener('url', _handleEvent)
  }
}, [isFocused])
Solution

  • It'll attach multiple handlers, adding one each time isFocused changes. To remove the previous handler when attaching the next, return a function that React will call:

    useEffect(() => {
  fetchData()
  Linking.addEventListener('url', _handleEvent)
  return () => Linking.removeEventListener('url', _handleEvent) // <======
}, [isFocused])

    You want to do that anyway so that the handler is removed when your component is completely unmounted.

    This is covered in the React documentation here.