update callbacks to use descriptive variables for useEffect hooks

Author: george

app/components/Article/Article.js

@@ -14,13 +14,14 @@ export default function Article(props) {
     COMPONENTS.forEach(Component => Component.stop())
   }
 
+  const onMountOnly = []
   useEffect(() => {
     Prism.highlightAll()
     COMPONENTS.forEach(Component => Component.start())
     setDomIsLoaded(true)
 
     return componentUnmountFunction
-  }, [])
+  }, onMountOnly)
 
   return (
     <article

app/components/PageHeader/PageHeader.js

@@ -7,14 +7,15 @@ import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 const PageHeader = props => {
   const [tabIndex, setTabIndex] = useState(FOCUSABLE_TABINDEX)
   const headerRef = useRef(null)
+  const onMountOnly = []
 
   useEffect(() => {
     if (props.lastLocation) {
       headerRef.current.focus()
     } else {
       setTabIndex(UNFOCUSABLE_TABINDEX)
     }
-  }, [])
+  }, onMountOnly)
 
   const handleBlur = () => {
     if (tabIndex === UNFOCUSABLE_TABINDEX) return

app/components/ScrollUpOnMount/ScrollUpOnMount.js

@@ -1,9 +1,11 @@
 import { useEffect } from "react"
 
 export default function ScrollUpOnMount() {
+  const onMountOnly = []
+
   useEffect(() => {
     window.scrollTo(0, 0)
-  }, [])
+  }, onMountOnly)
 
   return null
 }

app/components/SideNav/SideNav.js

@@ -33,18 +33,20 @@ export default function SideNav() {
     Accordions.stop()
   }
 
+  const onMountOnly = []
   useEffect(() => {
     Accordions.start()
     window.addEventListener("resize", handleMenuVisibility)
     setMenuIsOpen(isLargerThanCollapseWidth)
 
     return componentUnmountFunction
-  }, [])
+  }, onMountOnly)
 
+  const updateConditions = [menuIsOpen]
   useEffect(() => {
     Accordions.stop()
     Accordions.start()
-  }, [menuIsOpen])
+  }, updateConditions)
 
   // set up handlers and other helper methods
 

app/layouts/Main/Main.js

@@ -26,10 +26,11 @@ export default function Main() {
     ContextUtil.disableFocusOutline()
   }
 
+  const onMountOnly = []
   useEffect(() => {
     ContextUtil.enableFocusOutline()
     return componentUnmountFunction
-  }, [])
+  }, onMountOnly)
 
   const handleRefocusClick = ref => {
     ref.current.setAttribute(Attributes.TABINDEX, FOCUSABLE_TABINDEX)

app/pages/Home/Home.js

@@ -41,12 +41,13 @@ export default function Home() {
     ANIMATION_DATA.forEach(instance => instance.animation.destroy())
   }
 
+  const onMountOnly = []
   useEffect(() => {
     Prism.highlightAll()
     loadAnimations()
 
     return componentUnmountFunction
-  }, [])
+  }, onMountOnly)
 
   const renderAnimations = () => {
     return ANIMATION_DATA.map(animation => {