From a17cfbe4b82e9163d99638dc5d072c2edb796c56 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Mon, 13 Jun 2022 13:27:31 -0500
Subject: [PATCH] app: use ref instead of state for last focused item

This prevents the full app from rendering when the last focused item
changes. This item doesn't have an effect on the rendered state so it
shouldn't be stored using state.
---
 src/app/App.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 83f5d0ad..0a69299c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -8,6 +8,7 @@ import React, {
     MouseEventHandler,
     useCallback,
     useEffect,
+    useRef,
     useState,
 } from 'react';
 import SplitterLayout from 'react-splitter-layout';
@@ -165,27 +166,26 @@ const App: React.VFC = () => {
     // keep track of last focused element in the activities area and restore
     // focus to that element if any non-interactive area is clicked
 
-    const [lastActivitiesFocusChild, setLastActivitiesFocusChild] =
-        useState<HTMLElement | null>(null);
+    const lastActivitiesFocusChildRef = useRef<HTMLElement>();
 
     const handleFocus = useCallback<FocusEventHandler>(
         (e) => {
             if (e.target instanceof HTMLElement) {
-                setLastActivitiesFocusChild(e.target);
+                lastActivitiesFocusChildRef.current = e.target;
             }
         },
-        [setLastActivitiesFocusChild],
+        [lastActivitiesFocusChildRef],
     );
 
     const handleActivitiesMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>(
         (e) => {
             if (
-                lastActivitiesFocusChild &&
-                e.currentTarget.contains(lastActivitiesFocusChild)
+                lastActivitiesFocusChildRef.current &&
+                e.currentTarget.contains(lastActivitiesFocusChildRef.current)
             ) {
                 // if the last focused child exists and it is still inside of
                 // the activities area, focus it
-                lastActivitiesFocusChild.focus();
+                lastActivitiesFocusChildRef.current.focus();
             } else {
                 // otherwise, focus the first focusable element
                 const walker = getFocusableTreeWalker(e.currentTarget);
@@ -200,7 +200,7 @@ const App: React.VFC = () => {
             e.stopPropagation();
             e.preventDefault();
         },
-        [lastActivitiesFocusChild],
+        [lastActivitiesFocusChildRef],
     );
 
     return (