simplify again

Author: jquense

src/useCustomEffect.ts

@@ -10,9 +10,12 @@ import useMounted from './useMounted'
 
 export type EffectHook = (effect: EffectCallback, deps?: DependencyList) => void
 
-export type IsEqual<TDeps extends DependencyList> = (nextDeps: TDeps, prevDeps: TDeps) => boolean
+export type IsEqual<TDeps extends DependencyList> = (
+  nextDeps: TDeps,
+  prevDeps: TDeps,
+) => boolean
 
-export type CustomEffectOptions<TDeps> = {
+export type CustomEffectOptions<TDeps extends DependencyList> = {
   isEqual: IsEqual<TDeps>
   effectHook?: EffectHook
 }
@@ -79,10 +82,9 @@ function useCustomEffect<TDeps extends DependencyList = DependencyList>(
         cleanupRef.current = null
         if (cleanup) cleanup()
       }
-      cleanupRef.current.cleanup = cleanup
     }
 
-    return cleanupRef.current ?? undefined
+    return cleanupRef.current
   })
 
   useDebugValue(effect)

src/useMutationObserver.ts

@@ -1,20 +1,15 @@
-import useCustomEffect, { IsEqual } from './useCustomEffect'
+import useCustomEffect from './useCustomEffect'
 import isEqual from 'lodash/isEqual'
 import useImmediateUpdateEffect from './useImmediateUpdateEffect'
-import useMountEffect from './useMountEffect'
 import useEventCallback from './useEventCallback'
-import { useRef } from 'react'
 
 type Deps = [Element | null | undefined, MutationObserverInit]
 
 function isDepsEqual(
   [nextElement, nextConfig]: Deps,
   [prevElement, prevConfig]: Deps,
 ) {
-  return (
-    nextElement === prevElement &&
-    isEqual(nextConfig, prevConfig)
-  );
+  return nextElement === prevElement && isEqual(nextConfig, prevConfig)
 }
 
 /**
@@ -42,20 +37,18 @@ function useMutationObserver(
   config: MutationObserverInit,
   callback: MutationCallback,
 ): void {
-  const observerRef = useRef<MutationObserver | null>()
   const fn = useEventCallback(callback)
 
-  useMountEffect(() => {
-    if (!element) return
-
-    observerRef.current = new MutationObserver(fn)
-  })
-
   useCustomEffect(
     () => {
       if (!element) return
 
-      const observer = observerRef.current || new MutationObserver(fn)
+      // The behavior around reusing mutation observers is confusing
+      // observing again _should_ disable the last listener but doesn't
+      // seem to always be the case, maybe just in JSDOM? In any case the cost
+      // to redeclaring it is gonna be fairly low anyway, so make it simple
+      const observer = new MutationObserver(fn)
+
       observer.observe(element, config)
 
       return () => {

test/useMutationObserver.test.tsx

@@ -70,7 +70,7 @@ describe('useMutationObserver', () => {
     wrapper.setProps({ attributeFilter: undefined, role: 'button' })
 
     await Promise.resolve()
-
+    // console.log(spy.mock.calls[1][0][0].target)
     expect(spy).toHaveBeenCalledTimes(1)
 
     expect(spy).toHaveBeenCalledWith(