uses useRef instead of useState for simple ref usage

elastic · Apr 10, 2020 · d642d97 · d642d97
1 parent 6d5ad6b
commit d642d97
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/nav_drawer/nav_drawer_flyout.tsx b/src/components/nav_drawer/nav_drawer_flyout.tsx
@@ -3,6 +3,7 @@ import React, {
   FunctionComponent,
   KeyboardEventHandler,
   HTMLAttributes,
+  useRef,
 } from 'react';
 import classNames from 'classnames';
 import tabbable from 'tabbable';
@@ -48,7 +49,7 @@ export const EuiNavDrawerFlyout: FunctionComponent<EuiNavDrawerFlyoutProps> = ({
   wrapText = false,
   ...rest
 }) => {
-  const [menuEl, setMenuEl] = useState<HTMLDivElement | null>();
+  const menuElementRef = useRef<HTMLDivElement>(null);
   const [
     tabbables,
     setTabbables,
@@ -68,8 +69,10 @@ export const EuiNavDrawerFlyout: FunctionComponent<EuiNavDrawerFlyoutProps> = ({
       handleClose();
     } else if (event.keyCode === keyCodes.TAB) {
       let tabs = tabbables;
-      if (!tabs && menuEl) {
-        tabs = tabbable(menuEl).filter(element => element.tagName !== 'DIV');
+      if (!tabs && menuElementRef.current) {
+        tabs = tabbable(menuElementRef.current).filter(
+          element => element.tagName !== 'DIV'
+        );
         setTabbables(tabs);
       }
       if (!tabs) {
@@ -96,7 +99,7 @@ export const EuiNavDrawerFlyout: FunctionComponent<EuiNavDrawerFlyoutProps> = ({
       className={classes}
       aria-labelledby={LABEL}
       onKeyDown={handleKeyDown}
-      ref={setMenuEl}
+      ref={menuElementRef}
       {...rest}>
       <EuiTitle className="euiNavDrawerFlyout__title" size="xxs">
         <div id={LABEL} tabIndex={-1}>