fix: redundant useEffect() dependencies

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useLayoutEffect } from 'react'
 import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { TooltipContent } from 'components/TooltipContent'
@@ -73,6 +73,19 @@ const Tooltip = ({
       setAnchorsBySelect([])
     }
   }, [anchorSelect])
+  const mounted = useRef(false)
+
+  /**
+   * useLayoutEffect runs before useEffect,
+   * but should be used carefully because of caveats
+   * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
+   */
+  useLayoutEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+    }
+  }, [])
 
   useEffect(() => {
     if (!show) {
@@ -91,12 +104,18 @@ const Tooltip = ({
   }, [show])
 
   const handleShow = (value: boolean) => {
+    if (!mounted.current) {
+      return
+    }
     setRendered(true)
     /**
      * wait for the component to render and calculate position
      * before actually showing
      */
     setTimeout(() => {
+      if (!mounted.current) {
+        return
+      }
       setIsOpen?.(value)
       if (isOpen === undefined) {
         setShow(value)
@@ -375,23 +394,13 @@ const Tooltip = ({
      * rendered is also a dependency to ensure anchor observers are re-registered
      * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
      */
-  }, [
-    rendered,
-    anchorRefs,
-    activeAnchor,
-    closeOnEsc,
-    anchorId,
-    anchorsBySelect,
-    events,
-    delayHide,
-    delayShow,
-  ])
+  }, [rendered, anchorRefs, activeAnchor, closeOnEsc, events, delayHide, delayShow])
 
   useEffect(() => {
     if (position) {
       // if `position` is set, override regular and `float` positioning
       handleTooltipPosition(position)
-      return () => null
+      return
     }
 
     if (float) {
@@ -406,10 +415,9 @@ const Tooltip = ({
         handleTooltipPosition(lastFloatPosition.current)
       }
       // if `float` is set, override regular positioning
-      return () => null
+      return
     }
 
-    let mounted = true
     computeTooltipPosition({
       place,
       offset,
@@ -419,7 +427,7 @@ const Tooltip = ({
       strategy: positionStrategy,
       middlewares,
     }).then((computedStylesData) => {
-      if (!mounted) {
+      if (!mounted.current) {
         // invalidate computed positions after remount
         return
       }
@@ -430,21 +438,7 @@ const Tooltip = ({
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
     })
-    return () => {
-      mounted = false
-    }
-  }, [
-    show,
-    anchorId,
-    anchorsBySelect,
-    activeAnchor,
-    content,
-    html,
-    place,
-    offset,
-    positionStrategy,
-    position,
-  ])
+  }, [show, activeAnchor, content, html, place, offset, positionStrategy, position])
 
   useEffect(() => {
     const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)