fix: improve performance by adding enabled flag to useWatcher (#196)

- we only need to register the measuring callback if we actually have a `node` prop.
- this reduced a lot of unnecessary computations that made applications with a lot of `Stick` components slow over time.

Co-authored-by: Andreas Köberle <koeberle@gmail.com>

Co-authored-by: Andreas Köberle <koeberle@gmail.com>

src/Stick.js

@@ -132,7 +132,7 @@ function Stick({
     }
   }, [resolvedAlign, resolvedPosition, sameWidth, width])
 
-  useWatcher(measure, { updateOnAnimationFrame })
+  useWatcher(measure,  {updateOnAnimationFrame, enabled: !!node} )
 
   const handleReposition = useCallback(() => {
     if (nodeRef.current && anchorRef.current) {

src/StickPortal.js

@@ -81,7 +81,7 @@ function StickPortal(
     }
   }, [host, left, position, top, visible])
 
-  useWatcher(measure, { updateOnAnimationFrame })
+  useWatcher(measure, { updateOnAnimationFrame, enabled: visible })
 
   const Component = component || 'div'
   return (

src/hooks/useWatcher.js

@@ -4,18 +4,19 @@ import { useEffect } from 'react'
 type WatcherFuncT = () => void
 type OptionsT = {|
   updateOnAnimationFrame: boolean,
+  enabled: boolean
 |}
 
 function useWatcher(
   watcher: WatcherFuncT,
-  { updateOnAnimationFrame }: OptionsT
+  { updateOnAnimationFrame, enabled }: OptionsT
 ): void {
   useEffect(() => {
     let animationFrameId
     let idleCallbackId
 
     // do not track in node
-    if (typeof window.requestAnimationFrame !== 'undefined') {
+    if (enabled && typeof window.requestAnimationFrame !== 'undefined') {
       const callback = () => {
         watcher()
 
@@ -38,7 +39,7 @@ function useWatcher(
         cancelIdleCallback(idleCallbackId)
       }
     }
-  }, [updateOnAnimationFrame, watcher])
+  }, [updateOnAnimationFrame, watcher, enabled])
 }
 
 export default useWatcher