Merge pull request #160 from geotrev/app/refs-update

Convert createRef to preferred useRef

Author: geotrev

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

@@ -1,20 +1,21 @@
-import React, { createRef, useState, useEffect } from "react"
+import React, { useRef, useState, useEffect } from "react"
 import { withLastLocation } from "react-router-last-location"
 import PropTypes from "prop-types"
 
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
 const PageHeader = props => {
   const [tabIndex, setTabIndex] = useState(FOCUSABLE_TABINDEX)
-  const headerRef = createRef()
+  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

@@ -14,29 +14,29 @@ import "./styles.scss"
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
 export default function Main() {
+  const headerRef = React.useRef(null)
+  const mainRef = React.useRef(null)
   const Attributes = {
     TABINDEX: "tabindex",
   }
+  const getHeaderTabIndex = () => headerRef.current.getAttribute(Attributes.TABINDEX)
+  const getMainTabIndex = () => mainRef.current.getAttribute(Attributes.TABINDEX)
 
-  const headerRef = React.createRef()
-  const mainRef = React.createRef()
   const componentUnmountFunction = () => {
     ContextUtil.disableFocusOutline()
   }
 
+  const onMountOnly = []
   useEffect(() => {
     ContextUtil.enableFocusOutline()
     return componentUnmountFunction
-  }, [])
+  }, onMountOnly)
 
   const handleRefocusClick = ref => {
     ref.current.setAttribute(Attributes.TABINDEX, FOCUSABLE_TABINDEX)
     ref.current.focus()
   }
 
-  const getHeaderTabIndex = () => headerRef.current.getAttribute(Attributes.TABINDEX)
-  const getMainTabIndex = () => mainRef.current.getAttribute(Attributes.TABINDEX)
-
   const handleHeaderBlur = () => {
     if (getHeaderTabIndex() === UNFOCUSABLE_TABINDEX) return
     headerRef.current.removeAttribute(Attributes.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 => {