javascript react-native expo react-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()
  const subscription = Linking.addEventListener('url', _handleEvent)
//^^^^^^^^^^^^^^^^^^^^^
  return () => subscription.remove() // <======
}, [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 (it's in the paragraph describing the setup parameter).

Unfortunately, I can't find documentation for the EmitterSubscription that addEventListener returns. It may be the case that you don't need the arrow function and can just do this:

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

It depends on whether remove works properly when called that way (with this not set). Some subscription systems I've worked with do work that way, others don't. You'll have to check and see.