Improve render performance

app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx

@@ -1,22 +1,30 @@
 import React, { useEffect } from 'react'
 
 export function useAnimationToIndicateTopicUpdate(
+  ref: React.MutableRefObject<HTMLDivElement | undefined>,
   lastUpdate: number,
+  className: string,
   selected: boolean,
-  setShowUpdateAnimation: React.Dispatch<React.SetStateAction<boolean>>,
-  showUpdateAnimation: boolean
+  shouldAnimate: boolean
 ) {
   useEffect(() => {
-    if (Date.now() - lastUpdate < 3000 && !selected) {
-      setShowUpdateAnimation(true)
-    }
-  }, [lastUpdate, selected])
-  useEffect(() => {
-    if (showUpdateAnimation) {
-      const timeout = setTimeout(() => setShowUpdateAnimation(false), 500)
+    if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) {
+      let animationFrame = requestAnimationFrame(() => {
+        ref.current && ref.current.classList.add(className)
+      })
+
+      const timeout = setTimeout(
+        () =>
+          (animationFrame = requestAnimationFrame(() => {
+            ref.current && ref.current.classList.remove(className)
+          })),
+        500
+      )
+
       return function cleanup() {
         clearTimeout(timeout)
+        animationFrame && cancelAnimationFrame(animationFrame)
       }
     }
-  }, [showUpdateAnimation])
+  }, [lastUpdate, selected, shouldAnimate, className])
 }