AbortController Vs RemoveEventListener For Cleanup In React Hooks

Dec 24, 2024

AbortController vs removeEventListener: Using AbortController simplifies cleanup in useEffect hooks, but requires careful consideration of event handling and state updates.

Using AbortController vs removeEventListener

Using AbortController

import { useEffect } from "react"
export function useOnlineStatus(onlineCallback: () => void, offlineCallback: () => void) {
  useEffect(() => {
    const controller = new AbortController()
    window.addEventListener("online", onlineCallback, { signal: controller.signal })
    window.addEventListener("offline", offlineCallback, { signal: controller.signal })
    return () => {
      controller.abort()
    }
  }, [onlineCallback, offlineCallback])
}

    
    

    
    




vs 
Using removeEventListener

import { useEffect }...

Read the full article