[MIRROR] React cleanup (#1965)

* React cleanup (#82607)

## About The Pull Request
- No defaultHooks in react. Might fix issues where pages were not
scrollable on hover.
- createRef in a functional component. should be useref

## Why It's Good For The Game
Code improvement

* React cleanup

---------

Co-authored-by: Jeremiah <[email protected]>

tgui/packages/tgui/components/Autofocus.tsx

@@ -1,17 +1,23 @@
-import { createRef, PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect, useRef } from 'react';
 
-export const Autofocus = (props: PropsWithChildren) => {
-  const ref = createRef<HTMLDivElement>();
+/** Used to force the window to steal focus on load. Children optional */
+export function Autofocus(props: PropsWithChildren) {
+  const { children } = props;
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    setTimeout(() => {
+    const timer = setTimeout(() => {
       ref.current?.focus();
     }, 1);
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, []);
 
   return (
     <div ref={ref} tabIndex={-1}>
-      {props.children}
+      {children}
     </div>
   );
-};
+}

tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx

@@ -177,12 +177,6 @@ const KeybindingName = (props: { keybinding: Keybinding }) => {
   );
 };
 
-KeybindingName.defaultHooks = {
-  onComponentShouldUpdate: (lastProps, nextProps) => {
-    return lastProps.keybinding !== nextProps.keybinding;
-  },
-};
-
 const ResetToDefaultButton = (props: { keybindingId: string }) => {
   const { act } = useBackend<PreferencesMenuData>();
 

tgui/packages/tgui/layouts/Layout.tsx

@@ -5,6 +5,7 @@
  */
 
 import { classes } from 'common/react';
+import { useEffect, useRef } from 'react';
 
 import {
   BoxProps,
@@ -40,6 +41,20 @@ type ContentProps = Partial<{
 
 function LayoutContent(props: ContentProps) {
   const { className, scrollable, children, ...rest } = props;
+  const node = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const self = node.current;
+
+    if (self && scrollable) {
+      addScrollableNode(self);
+    }
+    return () => {
+      if (self && scrollable) {
+        removeScrollableNode(self);
+      }
+    };
+  }, []);
 
   return (
     <div
@@ -49,16 +64,12 @@ function LayoutContent(props: ContentProps) {
         className,
         computeBoxClassName(rest),
       ])}
+      ref={node}
       {...computeBoxProps(rest)}
     >
       {children}
     </div>
   );
 }
 
-LayoutContent.defaultHooks = {
-  onComponentDidMount: (node) => addScrollableNode(node),
-  onComponentWillUnmount: (node) => removeScrollableNode(node),
-};
-
 Layout.Content = LayoutContent;