diff --git a/tgui/docs/state-usage.md b/tgui/docs/state-usage.md
new file mode 100644
index 00000000000..9d3a2812a68
--- /dev/null
+++ b/tgui/docs/state-usage.md
@@ -0,0 +1,30 @@
+# Managing component state
+
+React has excellent documentation on useState and useEffect. These hooks should be the ways to manage state in TGUI (v5).
+[React Hooks](https://react.dev/learn/state-a-components-memory)
+
+You might find usages of useLocalState. This should be considered deprecated and will be removed in the future. In older versions of TGUI, InfernoJS did not have hooks, so these were used to manage state. useSharedState is still used in some places where uis are considered "IC" and user input is shared with all persons at the console/machine/thing.
+
+## A Note on State
+
+Many beginners tend to overuse state (or hooks all together). State is effective when you want to implement user interactivity, or are handling asynchronous data, but if you are simply using state to store a value that is not changing, you should consider using a variable instead.
+
+In previous versions of React, each setState would trigger a re-render, which would cause poorly written components to cascade re-render on each page load. Messy! Though this is no longer the case with batch rendering, it's still worthwhile to point out that you might be overusing it.
+
+## Derived state
+
+One great way to cut back on state usage is by using props or other state as the basis for a variable. You'll see many examples of this in the TGUI codebase. What does this mean? Here's an example:
+
+```tsx
+// Bad
+const [count, setCount] = useState(0);
+const [isEven, setIsEven] = useState(false);
+
+useEffect(() => {
+  setIsEven(count % 2 === 0);
+}, [count]);
+
+// Good!
+const [count, setCount] = useState(0);
+const isEven = count % 2 === 0; // Derived state
+```
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index 464428fdcfd..9f865994574 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/tgui/packages/tgui/backend.ts
@@ -316,6 +316,7 @@ type StateWithSetter<T> = [T, (nextState: T) => void];
  * @param context React context.
  * @param key Key which uniquely identifies this state in Redux store.
  * @param initialState Initializes your global variable with this value.
+ * @deprecated Use useState and useEffect when you can. Pass the state as a prop.
  */
 export const useLocalState = <T>(
   key: string,
diff --git a/tgui/packages/tgui/interfaces/AbductorConsole.jsx b/tgui/packages/tgui/interfaces/AbductorConsole.jsx
index 4ba7b4488eb..e870089a1bc 100644
--- a/tgui/packages/tgui/interfaces/AbductorConsole.jsx
+++ b/tgui/packages/tgui/interfaces/AbductorConsole.jsx
@@ -5,6 +5,7 @@ import { GenericUplink } from './Uplink/GenericUplink';
 
 export const AbductorConsole = (props) => {
   const [tab, setTab] = useSharedState('tab', 1);
+
   return (
     <Window theme="abductor" width={600} height={532}>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/AccountingConsole.tsx b/tgui/packages/tgui/interfaces/AccountingConsole.tsx
index 4aa4633e10a..a3f23627753 100644
--- a/tgui/packages/tgui/interfaces/AccountingConsole.tsx
+++ b/tgui/packages/tgui/interfaces/AccountingConsole.tsx
@@ -7,9 +7,9 @@ import {
   Tabs,
 } from '../components';
 import { useBackend } from '../backend';
-import { useLocalState } from '../backend';
 import { Window } from '../layouts';
 import { BooleanLike } from 'common/react';
+import { useState } from 'react';
 
 type Data = {
   PlayerAccounts: PlayerAccount[];
@@ -38,7 +38,7 @@ enum SCREENS {
 }
 
 export const AccountingConsole = (props) => {
-  const [screenmode, setScreenmode] = useLocalState('tab_main', SCREENS.users);
+  const [screenmode, setScreenmode] = useState(SCREENS.users);
 
   return (
     <Window width={300} height={360}>
diff --git a/tgui/packages/tgui/interfaces/Achievements.jsx b/tgui/packages/tgui/interfaces/Achievements.jsx
index 9bd52fb4f8c..bef15df4bc0 100644
--- a/tgui/packages/tgui/interfaces/Achievements.jsx
+++ b/tgui/packages/tgui/interfaces/Achievements.jsx
@@ -1,6 +1,7 @@
 import { useBackend, useLocalState } from '../backend';
 import { Box, Flex, Icon, Table, Tabs, Tooltip } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 export const Achievements = (props) => {
   const { data } = useBackend();
@@ -94,7 +95,7 @@ const Achievement = (props) => {
 const HighScoreTable = (props) => {
   const { data } = useBackend();
   const { highscore: highscores, user_ckey } = data;
-  const [highScoreIndex, setHighScoreIndex] = useLocalState('highscore', 0);
+  const [highScoreIndex, setHighScoreIndex] = useState(0);
   const highscore = highscores[highScoreIndex];
   if (!highscore) {
     return null;
diff --git a/tgui/packages/tgui/interfaces/Adminhelp.tsx b/tgui/packages/tgui/interfaces/Adminhelp.tsx
index 51ba58ffd75..c99a2764715 100644
--- a/tgui/packages/tgui/interfaces/Adminhelp.tsx
+++ b/tgui/packages/tgui/interfaces/Adminhelp.tsx
@@ -1,5 +1,6 @@
 import { BooleanLike } from 'common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { TextArea, Stack, Button, NoticeBox, Input, Box } from '../components';
 import { Window } from '../layouts';
 
@@ -18,15 +19,9 @@ export const Adminhelp = (props) => {
     bannedFromUrgentAhelp,
     urgentAhelpPromptMessage,
   } = data;
-  const [requestForAdmin, setRequestForAdmin] = useLocalState(
-    'request_for_admin',
-    false,
-  );
-  const [currentlyInputting, setCurrentlyInputting] = useLocalState(
-    'confirm_request',
-    false,
-  );
-  const [ahelpMessage, setAhelpMessage] = useLocalState('ahelp_message', '');
+  const [requestForAdmin, setRequestForAdmin] = useState(false);
+  const [currentlyInputting, setCurrentlyInputting] = useState(false);
+  const [ahelpMessage, setAhelpMessage] = useState('');
 
   const confirmationText = 'alert admins';
   return (
diff --git a/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx b/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx
index 5d757d4dbcb..01193775c4a 100644
--- a/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx
+++ b/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx
@@ -1,6 +1,6 @@
 // THIS IS A SKYRAT UI FILE
 import { toTitleCase } from 'common/string';
-import { useBackend, useSharedState, useLocalState } from '../backend';
+import { useBackend, useSharedState } from '../backend';
 import {
   Box,
   Button,
@@ -16,6 +16,7 @@ import {
   Tooltip,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 export const AmmoWorkbench = (props) => {
   const [tab, setTab] = useSharedState('tab', 1);
@@ -245,7 +246,7 @@ export const DatadiskTab = (props) => {
 const MaterialRow = (props) => {
   const { material, onRelease } = props;
 
-  const [amount, setAmount] = useLocalState('amount' + material.name, 1);
+  const [amount, setAmount] = useState(1);
 
   const amountAvailable = Math.floor(material.amount);
   return (
diff --git a/tgui/packages/tgui/interfaces/AnomalyRefinery.jsx b/tgui/packages/tgui/interfaces/AnomalyRefinery.jsx
index 577cbbe1838..7f3f2c2be65 100644
--- a/tgui/packages/tgui/interfaces/AnomalyRefinery.jsx
+++ b/tgui/packages/tgui/interfaces/AnomalyRefinery.jsx
@@ -12,7 +12,6 @@ import { Window } from '../layouts';
 import { GasmixParser } from './common/GasmixParser';
 
 export const AnomalyRefinery = (props) => {
-  const { act, data } = useBackend();
   return (
     <Window title="Anomaly Refinery" width={550} height={350}>
       <Window.Content>
@@ -26,6 +25,7 @@ const AnomalyRefineryContent = (props) => {
   const { act, data } = useBackend();
   const [currentTab, changeTab] = useSharedState('exploderTab', 1);
   const { core, valvePresent, active } = data;
+
   return (
     <Stack vertical fill>
       {currentTab === 1 && <CoreCompressorContent />}
diff --git a/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx b/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
index 51b95075f00..0966ec9ce7e 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
@@ -1,5 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   LabeledList,
   Stack,
@@ -13,6 +13,7 @@ import {
 import { BooleanLike } from 'common/react';
 import { Window } from '../layouts';
 import { Rules } from './AntagInfoRules';
+import { useState } from 'react';
 
 type Objectives = {
   count: number;
@@ -51,7 +52,7 @@ type Info = {
 };
 
 export const AntagInfoAssaultops = (props) => {
-  const [tab, setTab] = useLocalState('tab', 1);
+  const [tab, setTab] = useState(1);
   const { data } = useBackend<Info>();
   const { required_keys, uploaded_keys, objectives } = data;
   return (
diff --git a/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx b/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx
index 743d073d1e9..ec6f14e7b26 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx
@@ -1,6 +1,7 @@
 import { BooleanLike } from 'common/react';
 import { multiline } from 'common/string';
-import { useBackend, useSharedState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Button,
   Dimmer,
@@ -220,8 +221,7 @@ const AbilitiesSection = (props) => {
 const MemoriesSection = (props) => {
   const { data } = useBackend<Info>();
   const { memories } = data;
-  const [selectedMemory, setSelectedMemory] = useSharedState(
-    'memory',
+  const [selectedMemory, setSelectedMemory] = useState(
     (!!memories && memories[0]) || null,
   );
   const memoryMap = {};
@@ -229,6 +229,7 @@ const MemoriesSection = (props) => {
     const memory = memories[index];
     memoryMap[memory.name] = memory;
   }
+
   return (
     <Section
       fill
diff --git a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
index 80adbbb16c2..64b4af8b0ea 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
@@ -1,4 +1,4 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Section, Stack, Box, Tabs, Button, BlockQuote } from '../components';
 import { Window } from '../layouts';
 import { BooleanLike } from 'common/react';
@@ -7,6 +7,7 @@ import {
   Objective,
   ReplaceObjectivesButton,
 } from './common/Objectives';
+import { useState } from 'react';
 // SKYRAT EDIT BEGIN
 import { Rules } from './AntagInfoRules';
 // SKYRAT EDIT END
@@ -317,7 +318,7 @@ export const AntagInfoHeretic = (props) => {
   const { data } = useBackend<Info>();
   const { ascended } = data;
 
-  const [currentTab, setTab] = useLocalState('currentTab', 0);
+  const [currentTab, setTab] = useState(0);
 
   return (
     <Window width={675} height={635}>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx b/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
index fda1ec42388..b81143c1263 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
@@ -1,4 +1,4 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { multiline } from 'common/string';
 import { GenericUplink, Item } from './Uplink/GenericUplink';
 import { BlockQuote, Button, Section, Stack, Tabs } from '../components';
@@ -9,6 +9,7 @@ import {
   Objective,
   ReplaceObjectivesButton,
 } from './common/Objectives';
+import { useState } from 'react';
 // SKYRAT EDIT BEGIN
 import { Rules } from './AntagInfoRules';
 // SKYRAT EDIT END
@@ -178,7 +179,7 @@ const CodewordsSection = (props) => {
 export const AntagInfoMalf = (props) => {
   const { act, data } = useBackend<Info>();
   const { processingTime, categories } = data;
-  const [antagInfoTab, setAntagInfoTab] = useLocalState('antagInfoTab', 0);
+  const [antagInfoTab, setAntagInfoTab] = useState(0);
   const categoriesList: string[] = [];
   const items: Item[] = [];
   for (let i = 0; i < categories.length; i++) {
diff --git a/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx b/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
index 571da942106..997d296035f 100644
--- a/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
+++ b/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
@@ -1,4 +1,5 @@
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -32,7 +33,7 @@ export const AtmosControlConsole = (props) => {
     control: boolean;
   }>();
   const chambers = data.chambers || [];
-  const [chamberId, setChamberId] = useLocalState('chamberId', chambers[0]?.id);
+  const [chamberId, setChamberId] = useState(chambers[0]?.id);
   const selectedChamber =
     chambers.length === 1
       ? chambers[0]
diff --git a/tgui/packages/tgui/interfaces/AuxBaseConsole.tsx b/tgui/packages/tgui/interfaces/AuxBaseConsole.tsx
index a011e23c553..aec8e573440 100644
--- a/tgui/packages/tgui/interfaces/AuxBaseConsole.tsx
+++ b/tgui/packages/tgui/interfaces/AuxBaseConsole.tsx
@@ -1,5 +1,6 @@
 import { BooleanLike } from 'common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Button, NoticeBox, Section, Table, Tabs } from '../components';
 import { Window } from '../layouts';
 import { ShuttleConsoleContent } from './ShuttleConsole';
@@ -27,9 +28,14 @@ const STATUS_COLOR_KEYS = {
   'All Clear': 'good',
 } as const;
 
+enum TAB {
+  Shuttle = 1,
+  Aux,
+}
+
 export const AuxBaseConsole = (props) => {
   const { data } = useBackend<Data>();
-  const [tab, setTab] = useLocalState('tab', 1);
+  const [tab, setTab] = useState(TAB.Shuttle);
   const { type, blind_drop, turrets = [] } = data;
 
   return (
@@ -56,10 +62,10 @@ export const AuxBaseConsole = (props) => {
             Turrets ({turrets.length})
           </Tabs.Tab>
         </Tabs>
-        {tab === 1 && (
+        {tab === TAB.Shuttle && (
           <ShuttleConsoleContent type={type} blind_drop={blind_drop} />
         )}
-        {tab === 2 && <AuxBaseConsoleContent />}
+        {tab === TAB.Aux && <AuxBaseConsoleContent />}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/BluespaceLocator.tsx b/tgui/packages/tgui/interfaces/BluespaceLocator.tsx
index b77dae378f4..ee3c00ba9a6 100644
--- a/tgui/packages/tgui/interfaces/BluespaceLocator.tsx
+++ b/tgui/packages/tgui/interfaces/BluespaceLocator.tsx
@@ -1,4 +1,5 @@
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Icon, ProgressBar, Tabs } from '../components';
 import { Window } from '../layouts';
 
@@ -25,28 +26,33 @@ const DIRECTION_TO_ICON = {
   northwest: 315,
 } as const;
 
+enum TAB {
+  Implant,
+  Beacon,
+}
+
 export const BluespaceLocator = (props) => {
-  const [tab, setTab] = useLocalState('tab', 'implant');
+  const [tab, setTab] = useState(TAB.Implant);
 
   return (
     <Window width={300} height={300}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
-            selected={tab === 'implant'}
-            onClick={() => setTab('implant')}
+            selected={tab === TAB.Implant}
+            onClick={() => setTab(TAB.Implant)}
           >
             Implants
           </Tabs.Tab>
           <Tabs.Tab
-            selected={tab === 'beacon'}
-            onClick={() => setTab('beacon')}
+            selected={tab === TAB.Beacon}
+            onClick={() => setTab(TAB.Beacon)}
           >
             Teleporter Beacons
           </Tabs.Tab>
         </Tabs>
-        {(tab === 'beacon' && <TeleporterBeacons />) ||
-          (tab === 'implant' && <TrackingImplants />)}
+        {(TAB.Beacon && <TeleporterBeacons />) ||
+          (TAB.Implant && <TrackingImplants />)}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/CameraConsole.tsx b/tgui/packages/tgui/interfaces/CameraConsole.tsx
index d283d7e8b71..c0715d50578 100644
--- a/tgui/packages/tgui/interfaces/CameraConsole.tsx
+++ b/tgui/packages/tgui/interfaces/CameraConsole.tsx
@@ -2,7 +2,8 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { BooleanLike, classes } from 'common/react';
 import { createSearch } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Button,
   ByondUi,
@@ -88,13 +89,15 @@ export const CameraConsole = (props) => {
 };
 
 export const CameraContent = (props) => {
+  const [searchText, setSearchText] = useState('');
+
   return (
     <Stack fill>
       <Stack.Item grow>
-        <CameraSelector />
+        <CameraSelector searchText={searchText} setSearchText={setSearchText} />
       </Stack.Item>
       <Stack.Item grow={3}>
-        <CameraControls />
+        <CameraControls searchText={searchText} />
       </Stack.Item>
     </Stack>
   );
@@ -102,7 +105,7 @@ export const CameraContent = (props) => {
 
 const CameraSelector = (props) => {
   const { act, data } = useBackend<Data>();
-  const [searchText, setSearchText] = useLocalState('searchText', '');
+  const { searchText, setSearchText } = props;
   const { activeCamera } = data;
   const cameras = selectCameras(data.cameras, searchText);
 
@@ -149,10 +152,10 @@ const CameraSelector = (props) => {
   );
 };
 
-const CameraControls = (props) => {
+const CameraControls = (props: { searchText: string }) => {
   const { act, data } = useBackend<Data>();
   const { activeCamera, can_spy, mapRef } = data;
-  const [searchText] = useLocalState('searchText', '');
+  const { searchText } = props;
 
   const cameras = selectCameras(data.cameras, searchText);
 
diff --git a/tgui/packages/tgui/interfaces/Cargo.jsx b/tgui/packages/tgui/interfaces/Cargo.jsx
index a41c605507a..01ef2f6f477 100644
--- a/tgui/packages/tgui/interfaces/Cargo.jsx
+++ b/tgui/packages/tgui/interfaces/Cargo.jsx
@@ -36,6 +36,7 @@ export const CargoContent = (props) => {
   const [tab, setTab] = useSharedState('tab', 'catalog');
   const { cart = [], requests = [], requestonly } = data;
   const cart_length = cart.reduce((total, entry) => total + entry.amount, 0);
+
   return (
     <Box>
       <CargoStatus />
@@ -108,6 +109,7 @@ const CargoStatus = (props) => {
     requestonly,
     can_send,
   } = data;
+
   return (
     <Section
       title={department}
diff --git a/tgui/packages/tgui/interfaces/CargoImportConsole.jsx b/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
index 95fb86e40be..49da9e8a674 100644
--- a/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
+++ b/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
@@ -1,11 +1,12 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Section, Stack, Box, Divider, Button } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 export const CargoImportConsole = (props) => {
-  const [category, setCategory] = useLocalState('category', '');
-  const [weapon, setArmament] = useLocalState('weapon');
+  const [category, setCategory] = useState('');
+  const [weapon, setArmament] = useState('weapon');
   const { act, data } = useBackend();
   const {
     armaments_list = [],
diff --git a/tgui/packages/tgui/interfaces/CellularEmporium.tsx b/tgui/packages/tgui/interfaces/CellularEmporium.tsx
index b1de3253d29..8f273ae08ac 100644
--- a/tgui/packages/tgui/interfaces/CellularEmporium.tsx
+++ b/tgui/packages/tgui/interfaces/CellularEmporium.tsx
@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import { BooleanLike } from '../../common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Button,
   Section,
@@ -35,10 +36,7 @@ type Ability = {
 
 export const CellularEmporium = (props) => {
   const { act, data } = useBackend<CellularEmporiumContext>();
-  const [searchAbilities, setSearchAbilities] = useLocalState(
-    'searchAbilities',
-    '',
-  );
+  const [searchAbilities, setSearchAbilities] = useState('');
 
   const { can_readapt, genetic_points_count } = data;
   return (
@@ -80,16 +78,16 @@ export const CellularEmporium = (props) => {
             </Stack>
           }
         >
-          <AbilityList />
+          <AbilityList searchAbilities={searchAbilities} />
         </Section>
       </Window.Content>
     </Window>
   );
 };
 
-const AbilityList = (props) => {
+const AbilityList = (props: { searchAbilities: string }) => {
   const { act, data } = useBackend<CellularEmporiumContext>();
-  const [searchAbilities] = useLocalState('searchAbilities', '');
+  const { searchAbilities } = props;
   const {
     abilities,
     owned_abilities,
@@ -124,51 +122,49 @@ const AbilityList = (props) => {
           : 'No abilities found.'}
       </NoticeBox>
     );
-  } else {
-    return (
-      <LabeledList>
-        {filteredAbilities.map((ability) => (
-          <LabeledList.Item
-            key={ability.name}
-            className="candystripe"
-            label={ability.name}
-            buttons={
-              <Stack>
-                <Stack.Item>{ability.genetic_point_required}</Stack.Item>
-                <Stack.Item>
-                  <Icon
-                    name="dna"
-                    color={
-                      owned_abilities.includes(ability.path)
-                        ? '#DD66DD'
-                        : 'gray'
-                    }
-                  />
-                </Stack.Item>
-                <Stack.Item>
-                  <Button
-                    content={'Evolve'}
-                    disabled={
-                      owned_abilities.includes(ability.path) ||
-                      ability.genetic_point_required > genetic_points_count ||
-                      ability.absorbs_required > absorb_count ||
-                      ability.dna_required > dna_count
-                    }
-                    onClick={() =>
-                      act('evolve', {
-                        path: ability.path,
-                      })
-                    }
-                  />
-                </Stack.Item>
-              </Stack>
-            }
-          >
-            {ability.desc}
-            <Box color="good">{ability.helptext}</Box>
-          </LabeledList.Item>
-        ))}
-      </LabeledList>
-    );
   }
+
+  return (
+    <LabeledList>
+      {filteredAbilities.map((ability) => (
+        <LabeledList.Item
+          key={ability.name}
+          className="candystripe"
+          label={ability.name}
+          buttons={
+            <Stack>
+              <Stack.Item>{ability.genetic_point_required}</Stack.Item>
+              <Stack.Item>
+                <Icon
+                  name="dna"
+                  color={
+                    owned_abilities.includes(ability.path) ? '#DD66DD' : 'gray'
+                  }
+                />
+              </Stack.Item>
+              <Stack.Item>
+                <Button
+                  content={'Evolve'}
+                  disabled={
+                    owned_abilities.includes(ability.path) ||
+                    ability.genetic_point_required > genetic_points_count ||
+                    ability.absorbs_required > absorb_count ||
+                    ability.dna_required > dna_count
+                  }
+                  onClick={() =>
+                    act('evolve', {
+                      path: ability.path,
+                    })
+                  }
+                />
+              </Stack.Item>
+            </Stack>
+          }
+        >
+          {ability.desc}
+          <Box color="good">{ability.helptext}</Box>
+        </LabeledList.Item>
+      ))}
+    </LabeledList>
+  );
 };
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.tsx b/tgui/packages/tgui/interfaces/ChemDispenser.tsx
index 80191cff556..3ffa30e3606 100644
--- a/tgui/packages/tgui/interfaces/ChemDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/ChemDispenser.tsx
@@ -1,7 +1,8 @@
 import { toFixed } from 'common/math';
 import { BooleanLike } from 'common/react';
 import { toTitleCase } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -36,7 +37,7 @@ export const ChemDispenser = (props) => {
   const { act, data } = useBackend<Data>();
   const recording = !!data.recordingRecipe;
   const { recipeReagents = [], recipes = [], beaker } = data;
-  const [hasCol, setHasCol] = useLocalState('has_col', false);
+  const [hasCol, setHasCol] = useState(false);
 
   const beakerTransferAmounts = beaker ? beaker.transferAmounts : [];
   const recordedContents =
@@ -46,6 +47,7 @@ export const ChemDispenser = (props) => {
       name: toTitleCase(id.replace(/_/, ' ')),
       volume: data.recordingRecipe[id],
     }));
+
   return (
     <Window width={565} height={620}>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/ChemMaster.tsx b/tgui/packages/tgui/interfaces/ChemMaster.tsx
index 8def37e0aa9..34e03836d1d 100644
--- a/tgui/packages/tgui/interfaces/ChemMaster.tsx
+++ b/tgui/packages/tgui/interfaces/ChemMaster.tsx
@@ -1,6 +1,7 @@
 import { BooleanLike, classes } from 'common/react';
 import { capitalize } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   AnimatedNumber,
   Box,
@@ -102,7 +103,7 @@ const ChemMasterContent = (props) => {
     suggestedContainer,
   } = data;
 
-  const [itemCount, setItemCount] = useLocalState('itemCount', 1);
+  const [itemCount, setItemCount] = useState(1);
 
   return (
     <Box>
diff --git a/tgui/packages/tgui/interfaces/ChemMixingChamber.tsx b/tgui/packages/tgui/interfaces/ChemMixingChamber.tsx
index 10d3e52e0aa..193617d6294 100644
--- a/tgui/packages/tgui/interfaces/ChemMixingChamber.tsx
+++ b/tgui/packages/tgui/interfaces/ChemMixingChamber.tsx
@@ -1,4 +1,4 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   AnimatedNumber,
   Box,
@@ -10,6 +10,7 @@ import {
 import { Window } from '../layouts';
 import { round, toFixed } from 'common/math';
 import { BooleanLike } from 'common/react';
+import { useState } from 'react';
 
 type Reagent = {
   name: string;
@@ -27,14 +28,11 @@ export type MixingData = {
 export const ChemMixingChamber = (props) => {
   const { act, data } = useBackend<MixingData>();
 
-  const [reagentName, setReagentName] = useLocalState('reagentName', '');
-  const [reagentQuantity, setReagentQuantity] = useLocalState(
-    'reagentQuantity',
-    1,
-  );
+  const [reagentQuantity, setReagentQuantity] = useState(1);
 
   const { emptying, temperature, targetTemp, isReacting } = data;
   const reagents = data.reagents || [];
+
   return (
     <Window width={290} height={400}>
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/ClockworkSlab.jsx b/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
index ee079372692..f9b0caf1802 100644
--- a/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
+++ b/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
@@ -1,6 +1,6 @@
 // THIS IS A SKYRAT UI FILE
 import { Fragment } from 'react';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Icon,
   Box,
@@ -14,6 +14,7 @@ import {
 } from '../components';
 import { Window } from '../layouts';
 import { TableRow } from '../components/Table';
+import { useState } from 'react';
 
 const brassColor = '#DFC69C';
 const tinkerCache = '#B5FD9D';
@@ -32,10 +33,7 @@ const convertPower = (power_in) => {
 };
 
 export const ClockworkSlab = (props) => {
-  const [selectedTab, setSelectedTab] = useLocalState(
-    'selectedTab',
-    'Servitude',
-  );
+  const [selectedTab, setSelectedTab] = useState('Servitude');
   return (
     <Window theme="clockwork" width={860} height={700}>
       <Window.Content>
@@ -335,7 +333,7 @@ const ClockworkOverviewStat = (props) => {
 };
 
 const ClockworkButtonSelection = (props) => {
-  const [selectedTab, setSelectedTab] = useLocalState('selectedTab', {});
+  const [selectedTab, setSelectedTab] = useState({});
   const tabs = ['Servitude', 'Preservation', 'Structures'];
   return (
     <Table>
diff --git a/tgui/packages/tgui/interfaces/DepartmentOrders.tsx b/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
index d24785d2713..8823018a14c 100644
--- a/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
+++ b/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
@@ -1,5 +1,6 @@
 import { BooleanLike } from 'common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -120,7 +121,8 @@ const CooldownDimmer = (props) => {
 const DepartmentCatalog = (props) => {
   const { act, data } = useBackend<Info>();
   const { supplies } = data;
-  const [tabCategory, setTabCategory] = useLocalState('tabName', supplies[0]);
+  const [tabCategory, setTabCategory] = useState(supplies[0]);
+
   return (
     <Stack vertical fill>
       <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/DopplerArray.jsx b/tgui/packages/tgui/interfaces/DopplerArray.jsx
index 8ceb6ccb1d1..f62fa8de56b 100644
--- a/tgui/packages/tgui/interfaces/DopplerArray.jsx
+++ b/tgui/packages/tgui/interfaces/DopplerArray.jsx
@@ -12,7 +12,6 @@ import {
 import { Window } from '../layouts';
 
 export const DopplerArray = (props) => {
-  const { act, data } = useBackend();
   return (
     <Window width={650} height={320} resizable>
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
index 55a50423fd1..3f63de4144d 100644
--- a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
+++ b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
@@ -1,10 +1,10 @@
 import { sortBy } from 'common/collections';
 import { classes } from 'common/react';
 import { ReactNode } from 'react';
-import { useSharedState } from '../../backend';
 import { Stack, Section, Icon, Dimmer } from '../../components';
 import { Design, MaterialMap } from './Types';
 import { SearchBar } from './SearchBar';
+import { useSharedState } from '../../backend';
 
 /**
  * A function that does nothing.
diff --git a/tgui/packages/tgui/interfaces/Filteriffic.jsx b/tgui/packages/tgui/interfaces/Filteriffic.jsx
index 19f954b3df0..ef055d92ec5 100644
--- a/tgui/packages/tgui/interfaces/Filteriffic.jsx
+++ b/tgui/packages/tgui/interfaces/Filteriffic.jsx
@@ -1,7 +1,7 @@
 import { map } from 'common/collections';
 import { toFixed } from 'common/math';
 import { numberOfDecimalDigits } from '../../common/math';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -15,6 +15,7 @@ import {
   Section,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 const FilterIntegerEntry = (props) => {
   const { value, name, filterName } = props;
@@ -41,7 +42,8 @@ const FilterIntegerEntry = (props) => {
 const FilterFloatEntry = (props) => {
   const { value, name, filterName } = props;
   const { act } = useBackend();
-  const [step, setStep] = useLocalState(`${filterName}-${name}`, 0.01);
+  const [step, setStep] = useState(0.01);
+
   return (
     <>
       <NumberInput
@@ -282,8 +284,9 @@ export const Filteriffic = (props) => {
   const filters = data.target_filter_data || {};
   const hasFilters = Object.keys(filters).length !== 0;
   const filterDefaults = data['filter_info'];
-  const [massApplyPath, setMassApplyPath] = useLocalState('massApplyPath', '');
-  const [hiddenSecret, setHiddenSecret] = useLocalState('hidden', false);
+  const [massApplyPath, setMassApplyPath] = useState('');
+  const [hiddenSecret, setHiddenSecret] = useState(false);
+
   return (
     <Window title="Filteriffic" width={500} height={500}>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/HoloPay.tsx b/tgui/packages/tgui/interfaces/HoloPay.tsx
index bc5e4f3c51c..dc62900b985 100644
--- a/tgui/packages/tgui/interfaces/HoloPay.tsx
+++ b/tgui/packages/tgui/interfaces/HoloPay.tsx
@@ -1,5 +1,6 @@
 import { decodeHtmlEntities } from 'common/string';
-import { useBackend, useLocalState } from 'tgui/backend';
+import { useState } from 'react';
+import { useBackend } from 'tgui/backend';
 import {
   Box,
   Button,
@@ -35,7 +36,7 @@ of their respective owners.`;
 export const HoloPay = (props) => {
   const { data } = useBackend<HoloPayData>();
   const { owner } = data;
-  const [setupMode, setSetupMode] = useLocalState('setupMode', false);
+  const [setupMode, setSetupMode] = useState(false);
   // User clicked the "Setup" or "Done" button.
   const onClick = () => {
     setSetupMode(!setupMode);
diff --git a/tgui/packages/tgui/interfaces/LoadoutManager.tsx b/tgui/packages/tgui/interfaces/LoadoutManager.tsx
index 6f9c13043f7..b9617450154 100644
--- a/tgui/packages/tgui/interfaces/LoadoutManager.tsx
+++ b/tgui/packages/tgui/interfaces/LoadoutManager.tsx
@@ -1,5 +1,6 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useSharedState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Box, Button, Section, Stack, Dropdown } from '../components';
 import { BooleanLike } from 'common/react';
 import { Window } from '../layouts';
@@ -33,10 +34,7 @@ export const LoadoutManager = (props) => {
   const { act, data } = useBackend<LoadoutTabData>();
   const { selected_loadout, loadout_tabs, user_is_donator } = data;
 
-  const [selectedTabName, setSelectedTab] = useSharedState(
-    'selectedTab',
-    loadout_tabs[0]?.name,
-  );
+  const [selectedTabName, setSelectedTab] = useState(loadout_tabs[0]?.name);
   const selectedTab = loadout_tabs.find((curTab) => {
     return curTab.name === selectedTabName;
   });
diff --git a/tgui/packages/tgui/interfaces/LogViewer.tsx b/tgui/packages/tgui/interfaces/LogViewer.tsx
index d07f4a0605c..16bcfd7f318 100644
--- a/tgui/packages/tgui/interfaces/LogViewer.tsx
+++ b/tgui/packages/tgui/interfaces/LogViewer.tsx
@@ -1,4 +1,5 @@
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Button,
   Collapsible,
@@ -40,10 +41,7 @@ const CATEGORY_ALL = 'all';
 export const LogViewer = (_: any) => {
   const { data, act } = useBackend<LogViewerData>();
 
-  const [activeCategory, setActiveCategory] = useLocalState(
-    'activeCategory',
-    '',
-  );
+  const [activeCategory, setActiveCategory] = useState('');
 
   let viewerData: LogViewerCategoryData = {
     entry_count: 0,
@@ -90,10 +88,7 @@ type CategoryBarProps = {
 
 const CategoryBar = (props: CategoryBarProps) => {
   const sorted = [...props.options].sort();
-  const [categorySearch, setCategorySearch] = useLocalState(
-    'categorySearch',
-    '',
-  );
+  const [categorySearch, setCategorySearch] = useState('');
 
   return (
     <Section
@@ -123,21 +118,22 @@ const CategoryBar = (props: CategoryBarProps) => {
           selected={props.active === CATEGORY_ALL}
           onClick={() => props.setActive(CATEGORY_ALL)}
         />
-        {sorted.map((category) => {
-          if (!category.toLowerCase().includes(categorySearch.toLowerCase())) {
-            return null;
-          }
-          return (
-            <Stack.Item key={category}>
-              <Button
-                textAlign="left"
-                content={category}
-                selected={category === props.active}
-                onClick={() => props.setActive(category)}
-              />
-            </Stack.Item>
-          );
-        })}
+        {sorted
+          .filter(
+            (cat) => !cat.toLowerCase().includes(categorySearch.toLowerCase()),
+          )
+          .map((category) => {
+            return (
+              <Stack.Item key={category}>
+                <Button
+                  textAlign="left"
+                  content={category}
+                  selected={category === props.active}
+                  onClick={() => props.setActive(category)}
+                />
+              </Stack.Item>
+            );
+          })}
       </Stack>
     </Section>
   );
@@ -158,9 +154,9 @@ const validateRegExp = (str: string) => {
 };
 
 const CategoryViewer = (props: CategoryViewerProps) => {
-  const [search, setSearch] = useLocalState('search', '');
-  let [searchRegex, setSearchRegex] = useLocalState('searchRegex', false);
-  let [caseSensitive, setCaseSensitive] = useLocalState('caseSensitive', false);
+  const [search, setSearch] = useState('');
+  let [searchRegex, setSearchRegex] = useState(false);
+  let [caseSensitive, setCaseSensitive] = useState(false);
   if (!search && searchRegex) {
     setSearchRegex(false);
     searchRegex = false;
diff --git a/tgui/packages/tgui/interfaces/MODsuit.tsx b/tgui/packages/tgui/interfaces/MODsuit.tsx
index 8feacc0085e..1a3b8b3461c 100644
--- a/tgui/packages/tgui/interfaces/MODsuit.tsx
+++ b/tgui/packages/tgui/interfaces/MODsuit.tsx
@@ -1,6 +1,6 @@
 import { BooleanLike } from 'common/react';
 import { formatSiUnit } from '../format';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Button,
   ColorBox,
@@ -19,6 +19,7 @@ import {
   NoticeBox,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 type MODsuitData = {
   // Static
@@ -655,10 +656,8 @@ const ModuleSection = (props) => {
   const { act, data } = useBackend<MODsuitData>();
   const { complexity_max, module_info } = data;
   const { complexity } = data.suit_status;
-  const [configureState, setConfigureState] = useLocalState(
-    'module_configuration',
-    '',
-  );
+  const [configureState, setConfigureState] = useState('');
+
   return (
     <Section
       title="Modules"
diff --git a/tgui/packages/tgui/interfaces/Microscope.jsx b/tgui/packages/tgui/interfaces/Microscope.jsx
index c71e01aac68..74591fce7d3 100644
--- a/tgui/packages/tgui/interfaces/Microscope.jsx
+++ b/tgui/packages/tgui/interfaces/Microscope.jsx
@@ -6,6 +6,7 @@ export const Microscope = (props) => {
   const { act, data } = useBackend();
   const [tab, setTab] = useSharedState('tab', 1);
   const { has_dish, cell_lines = [], viruses = [] } = data;
+
   return (
     <Window>
       <Window.Content scrollable>
@@ -52,6 +53,7 @@ const Organisms = (props) => {
   if (!cell_lines.length) {
     return <NoticeBox>No micro-organisms found</NoticeBox>;
   }
+
   return cell_lines.map((cell_line) => {
     return (
       <Section key={cell_line.desc} title={cell_line.desc}>
diff --git a/tgui/packages/tgui/interfaces/NetpodOutfits.tsx b/tgui/packages/tgui/interfaces/NetpodOutfits.tsx
index 9a31ffe179e..7b3a3deb81b 100644
--- a/tgui/packages/tgui/interfaces/NetpodOutfits.tsx
+++ b/tgui/packages/tgui/interfaces/NetpodOutfits.tsx
@@ -7,10 +7,11 @@ import {
   Stack,
   Tabs,
 } from '../components';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 
 import { Window } from '../layouts';
 import { createSearch } from '../../common/string';
+import { useState } from 'react';
 
 type Data = {
   netsuit: string;
@@ -32,11 +33,8 @@ type Outfit = {
 export const NetpodOutfits = (props) => {
   const { act, data } = useBackend<Data>();
   const { netsuit, collections = [] } = data;
-  const [selectedType, setSelectedType] = useLocalState<Collection>(
-    'selectedType',
-    collections[0],
-  );
-  const [search, setSearch] = useLocalState<string>('outfitSearch', '');
+  const [selectedType, setSelectedType] = useState(collections[0]);
+  const [search, setSearch] = useState('');
 
   const searchFn = createSearch(search, (outfit: Outfit) => outfit.name);
 
diff --git a/tgui/packages/tgui/interfaces/Newscaster.jsx b/tgui/packages/tgui/interfaces/Newscaster.jsx
index 802fd8d5f86..b69ebe74b93 100644
--- a/tgui/packages/tgui/interfaces/Newscaster.jsx
+++ b/tgui/packages/tgui/interfaces/Newscaster.jsx
@@ -6,7 +6,7 @@
  */
 
 import { decodeHtmlEntities } from 'common/string';
-import { useBackend, useSharedState, useLocalState } from '../backend';
+import { useBackend, useSharedState } from '../backend';
 import { BountyBoardContent } from './BountyBoard';
 import { UserDetails } from './Vending';
 import {
@@ -23,6 +23,7 @@ import {
 } from '../components';
 import { marked } from 'marked';
 import { sanitizeText } from '../sanitize';
+import { useState } from 'react';
 
 const CENSOR_MESSAGE =
   'This channel has been deemed as threatening to \
@@ -36,6 +37,7 @@ export const Newscaster = (props) => {
     'tab_main',
     NEWSCASTER_SCREEN,
   );
+
   return (
     <>
       <NewscasterChannelCreation />
@@ -72,11 +74,12 @@ export const Newscaster = (props) => {
 /** The modal menu that contains the prompts to making new channels. */
 const NewscasterChannelCreation = (props) => {
   const { act, data } = useBackend();
-  const [lockedmode, setLockedmode] = useLocalState('lockedmode', 1);
+  const [lockedmode, setLockedmode] = useState(true);
   const { creating_channel, name, desc } = data;
   if (!creating_channel) {
     return null;
   }
+
   return (
     <Modal textAlign="center" mr={1.5}>
       <Stack vertical>
diff --git a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
index c2aa0bc515c..0818810fa71 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
+++ b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
@@ -1,6 +1,6 @@
 import { BooleanLike } from 'common/react';
 import { scale, toFixed } from 'common/math';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { createSearch } from 'common/string';
 import {
   Box,
@@ -17,6 +17,7 @@ import {
 import { flow } from 'common/fp';
 import { filter, sortBy } from 'common/collections';
 import { NtosWindow } from '../layouts';
+import { useState } from 'react';
 
 type Data = {
   disk_size: number;
@@ -62,11 +63,8 @@ export const NtosNetDownloader = (props) => {
   const downloadpercentage = toFixed(
     scale(downloadcompletion, 0, downloadsize) * 100,
   );
-  const [selectedCategory, setSelectedCategory] = useLocalState(
-    'category',
-    categories[0],
-  );
-  const [searchItem, setSearchItem] = useLocalState('searchItem', '');
+  const [selectedCategory, setSelectedCategory] = useState(categories[0]);
+  const [searchItem, setSearchItem] = useState('');
   const search = createSearch<ProgramData>(
     searchItem,
     (program) => program.filedesc,
@@ -88,6 +86,7 @@ export const NtosNetDownloader = (props) => {
   const disk_free_space = downloading
     ? disk_size - Number(toFixed(disk_used + downloadcompletion))
     : disk_size - disk_used;
+
   return (
     <NtosWindow width={600} height={600}>
       <NtosWindow.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/NtosNetMonitor.jsx b/tgui/packages/tgui/interfaces/NtosNetMonitor.jsx
index 2e9463ddc19..5e28cd2eacb 100644
--- a/tgui/packages/tgui/interfaces/NtosNetMonitor.jsx
+++ b/tgui/packages/tgui/interfaces/NtosNetMonitor.jsx
@@ -21,6 +21,7 @@ export const NtosNetMonitor = (props) => {
     ntnetlogs = [],
     tablets = [],
   } = data;
+
   return (
     <NtosWindow>
       <NtosWindow.Content scrollable>
@@ -67,6 +68,7 @@ export const NtosNetMonitor = (props) => {
 const MainPage = (props) => {
   const { ntnetrelays, idsalarm, idsstatus, ntnetlogs = [] } = props;
   const { act, data } = useBackend();
+
   return (
     <Section>
       <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
index 150479105a2..bc1e7060bc9 100644
--- a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
+++ b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
@@ -1,11 +1,12 @@
 import { resolveAsset } from '../assets';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Button, NoticeBox, Section, Stack, Input } from '../components';
 import { NtosWindow } from '../layouts';
+import { useState } from 'react';
 
 export const NtosPortraitPrinter = (props) => {
   const { act, data } = useBackend();
-  const [listIndex, setListIndex] = useLocalState('listIndex', 0);
+  const [listIndex, setListIndex] = useState(0);
   const { paintings, search_string, search_mode } = data;
   const got_paintings = !!paintings.length;
   const current_portrait_title = got_paintings && paintings[listIndex]['title'];
@@ -14,6 +15,7 @@ export const NtosPortraitPrinter = (props) => {
   const current_portrait_asset_name =
     got_paintings && 'paintings' + '_' + paintings[listIndex]['md5'];
   const current_portrait_ratio = got_paintings && paintings[listIndex]['ratio'];
+
   return (
     <NtosWindow title="Art Galaxy" width={400} height={446}>
       <NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosRecords.jsx b/tgui/packages/tgui/interfaces/NtosRecords.jsx
index c190b443d05..bdab180474b 100644
--- a/tgui/packages/tgui/interfaces/NtosRecords.jsx
+++ b/tgui/packages/tgui/interfaces/NtosRecords.jsx
@@ -1,11 +1,12 @@
 import { createSearch } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Icon, Input, Section } from '../components';
 import { NtosWindow } from '../layouts';
+import { useState } from 'react';
 
 export const NtosRecords = (props) => {
   const { act, data } = useBackend();
-  const [searchTerm, setSearchTerm] = useLocalState('search', '');
+  const [searchTerm, setSearchTerm] = useState('');
   const { mode, records } = data;
 
   const isMatchingSearchTerms = createSearch(searchTerm);
diff --git a/tgui/packages/tgui/interfaces/NtosRoboControl.jsx b/tgui/packages/tgui/interfaces/NtosRoboControl.jsx
index 29b3fadcce6..6602c86f334 100644
--- a/tgui/packages/tgui/interfaces/NtosRoboControl.jsx
+++ b/tgui/packages/tgui/interfaces/NtosRoboControl.jsx
@@ -19,6 +19,7 @@ export const NtosRoboControl = (props) => {
   const { act, data } = useBackend();
   const [tab_main, setTab_main] = useSharedState('tab_main', 1);
   const { bots, drones, id_owner, droneaccess, dronepingtypes } = data;
+
   return (
     <NtosWindow width={550} height={550}>
       <NtosWindow.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/NtosRobotact.jsx b/tgui/packages/tgui/interfaces/NtosRobotact.jsx
index 50d142b56d4..d190682ed7b 100644
--- a/tgui/packages/tgui/interfaces/NtosRobotact.jsx
+++ b/tgui/packages/tgui/interfaces/NtosRobotact.jsx
@@ -1,4 +1,4 @@
-import { useBackend, useSharedState } from '../backend';
+import { useBackend } from '../backend';
 import {
   AnimatedNumber,
   Box,
@@ -11,6 +11,7 @@ import {
   Tabs,
 } from '../components';
 import { NtosWindow } from '../layouts';
+import { useState } from 'react';
 
 export const NtosRobotact = (props) => {
   return (
@@ -24,8 +25,8 @@ export const NtosRobotact = (props) => {
 
 export const NtosRobotactContent = (props) => {
   const { act, data } = useBackend();
-  const [tab_main, setTab_main] = useSharedState('tab_main', 1);
-  const [tab_sub, setTab_sub] = useSharedState('tab_sub', 1);
+  const [tab_main, setTab_main] = useState(1);
+  const [tab_sub, setTab_sub] = useState(1);
   const {
     charge,
     maxcharge,
@@ -51,6 +52,7 @@ export const NtosRobotactContent = (props) => {
   const laws = data.Laws || [];
   const borgLog = data.borgLog || [];
   const borgUpgrades = data.borgUpgrades || [];
+
   return (
     <Flex direction={'column'}>
       <Flex.Item position="relative" mb={1}>
diff --git a/tgui/packages/tgui/interfaces/NtosSupermatter.tsx b/tgui/packages/tgui/interfaces/NtosSupermatter.tsx
index 00e6556f78d..7476ac9092c 100644
--- a/tgui/packages/tgui/interfaces/NtosSupermatter.tsx
+++ b/tgui/packages/tgui/interfaces/NtosSupermatter.tsx
@@ -1,15 +1,17 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { NtosWindow } from '../layouts';
 import { SupermatterContent, SupermatterData } from './Supermatter';
 import { Button, ProgressBar, Section, Table } from '../components';
+import { useState } from 'react';
 
 type NtosSupermatterData = SupermatterData & { focus_uid?: number };
 
 export const NtosSupermatter = (props) => {
   const { act, data } = useBackend<NtosSupermatterData>();
   const { sm_data, gas_metadata, focus_uid } = data;
-  const [activeUID, setActiveUID] = useLocalState('activeUID', 0);
+  const [activeUID, setActiveUID] = useState(0);
   const activeSM = sm_data.find((sm) => sm.uid === activeUID);
+
   return (
     <NtosWindow height={400} width={700}>
       <NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NumberInputModal.tsx b/tgui/packages/tgui/interfaces/NumberInputModal.tsx
index 47ff8b0255f..9e5ddf7a301 100644
--- a/tgui/packages/tgui/interfaces/NumberInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/NumberInputModal.tsx
@@ -1,9 +1,10 @@
 import { Loader } from './common/Loader';
 import { InputButtons } from './common/InputButtons';
-import { KEY_ENTER, KEY_ESCAPE } from '../../common/keycodes';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Button, RestrictedInput, Section, Stack } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
+import { KEY } from 'common/keys';
 
 type NumberInputData = {
   init_value: number;
@@ -19,7 +20,7 @@ type NumberInputData = {
 export const NumberInputModal = (props) => {
   const { act, data } = useBackend<NumberInputData>();
   const { init_value, large_buttons, message = '', timeout, title } = data;
-  const [input, setInput] = useLocalState('input', init_value);
+  const [input, setInput] = useState(init_value);
   const onChange = (value: number) => {
     if (value === input) {
       return;
@@ -43,11 +44,10 @@ export const NumberInputModal = (props) => {
       {timeout && <Loader value={timeout} />}
       <Window.Content
         onKeyDown={(event) => {
-          const keyCode = window.event ? event.which : event.keyCode;
-          if (keyCode === KEY_ENTER) {
+          if (event.key === KEY.Enter) {
             act('submit', { entry: input });
           }
-          if (keyCode === KEY_ESCAPE) {
+          if (event.key === KEY.Escape) {
             act('cancel');
           }
         }}
@@ -75,6 +75,7 @@ const InputArea = (props) => {
   const { act, data } = useBackend<NumberInputData>();
   const { min_value, max_value, init_value, round_value } = data;
   const { input, onClick, onChange } = props;
+
   return (
     <Stack fill>
       <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/OperatingComputer.jsx b/tgui/packages/tgui/interfaces/OperatingComputer.jsx
index dabaff2ace1..990fddcadd9 100644
--- a/tgui/packages/tgui/interfaces/OperatingComputer.jsx
+++ b/tgui/packages/tgui/interfaces/OperatingComputer.jsx
@@ -60,6 +60,7 @@ const PatientStateView = (props) => {
   if (!table) {
     return <NoticeBox>No Table Detected</NoticeBox>;
   }
+
   return (
     <>
       <Section title="Patient State">
diff --git a/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx b/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx
index 8e1785a60a9..f413ea15e3d 100644
--- a/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx
+++ b/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx
@@ -1,6 +1,6 @@
 // THIS IS A SKYRAT UI FILE
 import { round } from 'common/math';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Section,
   Stack,
@@ -18,7 +18,7 @@ import {
 import { Window } from '../layouts';
 
 export const OpposingForcePanel = (props) => {
-  const [tab, setTab] = useLocalState('tab', 1);
+  const [tab, setTab] = useState(1);
   const { act, data } = useBackend();
   const { admin_mode, creator_ckey, owner_antag } = data;
   return (
@@ -235,8 +235,7 @@ export const OpposingForceObjectives = (props) => {
   const { act, data } = useBackend();
   const { objectives = [], can_edit } = data;
 
-  const [selectedObjectiveID, setSelectedObjective] = useLocalState(
-    'objectives',
+  const [selectedObjectiveID, setSelectedObjective] = useState(
     objectives[0]?.id,
   );
 
diff --git a/tgui/packages/tgui/interfaces/OreContainer.tsx b/tgui/packages/tgui/interfaces/OreContainer.tsx
index 5f7db63a838..364135ca5b8 100644
--- a/tgui/packages/tgui/interfaces/OreContainer.tsx
+++ b/tgui/packages/tgui/interfaces/OreContainer.tsx
@@ -1,5 +1,6 @@
 import { createSearch, toTitleCase } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Box, Button, Input, Stack, Flex, Section } from '../components';
 import { Window } from '../layouts';
 
@@ -22,10 +23,11 @@ type Data = {
 export const OreContainer = (props) => {
   const { act, data } = useBackend<Data>();
   const { ores = [] } = data;
-  const [searchItem, setSearchItem] = useLocalState('searchItem', '');
+  const [searchItem, setSearchItem] = useState('');
   const search = createSearch(searchItem, (ore: Ores) => ore.name);
   const ores_filtered =
     searchItem.length > 0 ? ores.filter((ore) => search(ore)) : ores;
+
   return (
     <Window title="Ore Container" width={550} height={400}>
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx b/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
index 8eb7bec11ce..4970eabaa9e 100644
--- a/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
+++ b/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
@@ -1,5 +1,5 @@
 import { createSearch, toTitleCase } from 'common/string';
-import { useBackend, useLocalState, useSharedState } from '../backend';
+import { useBackend, useSharedState } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -14,18 +14,20 @@ import {
 } from '../components';
 import { Window } from '../layouts';
 import { formatSiUnit } from '../format';
+import { useState } from 'react';
 
 export const OreRedemptionMachine = (props) => {
   const { act, data } = useBackend();
   const { disconnected, unclaimedPoints, materials, user } = data;
   const [tab, setTab] = useSharedState('tab', 1);
-  const [searchItem, setSearchItem] = useLocalState('searchItem', '');
-  const [compact, setCompact] = useSharedState('compact', false);
+  const [searchItem, setSearchItem] = useState('');
+  const [compact, setCompact] = useState(false);
   const search = createSearch(searchItem, (materials) => materials.name);
   const material_filtered =
     searchItem.length > 0
       ? data.materials.filter(search)
       : materials.filter((material) => material && material.category === tab);
+
   return (
     <Window title="Ore Redemption Machine" width={435} height={500}>
       <Window.Content>
@@ -143,6 +145,7 @@ export const OreRedemptionMachine = (props) => {
               <Table>
                 {material_filtered.map((material) => (
                   <MaterialRow
+                    compact={compact}
                     key={material.id}
                     material={material}
                     onRelease={(amount) => {
@@ -171,9 +174,9 @@ export const OreRedemptionMachine = (props) => {
 
 const MaterialRow = (props) => {
   const { data } = useBackend();
+  const { compact } = props;
   const { material_icons } = data;
   const { material, onRelease } = props;
-  const [compact, setCompact] = useLocalState('compact', false);
 
   const display = material_icons.find(
     (mat_icon) => mat_icon.id === material.id,
diff --git a/tgui/packages/tgui/interfaces/PaiSubmit.tsx b/tgui/packages/tgui/interfaces/PaiSubmit.tsx
index ca72f584b83..b037c3870f8 100644
--- a/tgui/packages/tgui/interfaces/PaiSubmit.tsx
+++ b/tgui/packages/tgui/interfaces/PaiSubmit.tsx
@@ -1,7 +1,7 @@
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Box, Button, Input, Section, Stack } from '../components';
 import { Window } from '../layouts';
-import { logger } from '../logging';
 
 type Data = {
   comments: string;
@@ -21,12 +21,11 @@ alert pAI cards of your candidacy.`;
 export const PaiSubmit = (props) => {
   const { data } = useBackend<Data>();
   const { comments, description, name } = data;
-  const [input, setInput] = useLocalState<Data>('input', {
+  const [input, setInput] = useState({
     comments,
     description,
     name,
   });
-  logger.log(input);
 
   return (
     <Window width={400} height={460} title="pAI Candidacy Menu">
diff --git a/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx b/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
index 481e393fa2c..6027a21f7dc 100644
--- a/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
+++ b/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
@@ -1,6 +1,7 @@
 import { decodeHtmlEntities } from 'common/string';
+import { useState } from 'react';
 import { resolveAsset } from '../assets';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section, Table } from '../components';
 import { Window } from '../layouts';
 
@@ -27,11 +28,12 @@ type PaintingData = {
 
 export const PaintingAdminPanel = (props) => {
   const { act, data } = useBackend<PaintingAdminPanelData>();
-  const [chosenPaintingRef, setChosenPaintingRef] = useLocalState<
-    string | null
-  >('chosenPainting', null);
+  const [chosenPaintingRef, setChosenPaintingRef] = useState<
+    string | undefined
+  >();
   const { paintings } = data;
   const chosenPainting = paintings.find((p) => p.ref === chosenPaintingRef);
+
   return (
     <Window title="Painting Admin Panel" width={800} height={600}>
       <Window.Content scrollable>
@@ -39,7 +41,9 @@ export const PaintingAdminPanel = (props) => {
           <Section
             title="Painting Information"
             buttons={
-              <Button onClick={() => setChosenPaintingRef(null)}>Close</Button>
+              <Button onClick={() => setChosenPaintingRef(undefined)}>
+                Close
+              </Button>
             }
           >
             <img
@@ -126,7 +130,7 @@ export const PaintingAdminPanel = (props) => {
             <Section title="Actions">
               <Button.Confirm
                 onClick={() => {
-                  setChosenPaintingRef(null);
+                  setChosenPaintingRef(undefined);
                   act('delete', { ref: chosenPainting.ref });
                 }}
               >
diff --git a/tgui/packages/tgui/interfaces/PipeDispenser.tsx b/tgui/packages/tgui/interfaces/PipeDispenser.tsx
index 872cf61c1b9..9940a856558 100644
--- a/tgui/packages/tgui/interfaces/PipeDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/PipeDispenser.tsx
@@ -1,5 +1,6 @@
 import { BooleanLike } from 'common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Button, LabeledList, Section, Stack, Tabs } from '../components';
 import { Window } from '../layouts';
 import {
@@ -57,13 +58,11 @@ type Recipe = {
 const PipeTypeSection = (props) => {
   const { act, data } = useBackend<Data>();
   const { categories = [] } = data;
-  const [categoryName, setCategoryName] = useLocalState(
-    'categoryName',
-    categories[0].cat_name,
-  );
+  const [categoryName, setCategoryName] = useState(categories[0].cat_name);
   const shownCategory =
     categories.find((category) => category.cat_name === categoryName) ||
     categories[0];
+
   return (
     <Section fill scrollable>
       <Tabs>
diff --git a/tgui/packages/tgui/interfaces/PortraitPicker.jsx b/tgui/packages/tgui/interfaces/PortraitPicker.jsx
index d9312cc0789..d0dc041f307 100644
--- a/tgui/packages/tgui/interfaces/PortraitPicker.jsx
+++ b/tgui/packages/tgui/interfaces/PortraitPicker.jsx
@@ -1,11 +1,12 @@
 import { resolveAsset } from '../assets';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Button, Flex, NoticeBox, Section, Input } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 export const PortraitPicker = (props) => {
   const { act, data } = useBackend();
-  const [listIndex, setListIndex] = useLocalState('listIndex', 0);
+  const [listIndex, setListIndex] = useState(0);
   const { paintings, search_string, search_mode } = data;
   const got_paintings = !!paintings.length;
   const current_portrait_title = got_paintings && paintings[listIndex]['title'];
@@ -13,6 +14,7 @@ export const PortraitPicker = (props) => {
     got_paintings && 'By ' + paintings[listIndex]['creator'];
   const current_portrait_asset_name =
     got_paintings && 'paintings' + '_' + paintings[listIndex]['md5'];
+
   return (
     <Window theme="ntos" title="Portrait Picker" width={400} height={406}>
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.jsx b/tgui/packages/tgui/interfaces/PowerMonitor.jsx
index d63e38073d6..497caa850be 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.jsx
+++ b/tgui/packages/tgui/interfaces/PowerMonitor.jsx
@@ -1,7 +1,7 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -17,6 +17,7 @@ import {
   Stack,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 const PEAK_DRAW = 500000;
 
@@ -38,7 +39,7 @@ export const PowerMonitor = () => {
 export const PowerMonitorContent = (props) => {
   const { data } = useBackend();
   const { history = { supply: [], demand: [] } } = data;
-  const [sortByField, setSortByField] = useLocalState('sortByField', null);
+  const [sortByField, setSortByField] = useState(null);
   const supply = history.supply[history.supply.length - 1] || 0;
   const demand = history.demand[history.demand.length - 1] || 0;
   const supplyData = history.supply.map((value, i) => [i, value]);
diff --git a/tgui/packages/tgui/interfaces/ProduceConsole.tsx b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
index 0bc9fd9a5da..af7e874059d 100644
--- a/tgui/packages/tgui/interfaces/ProduceConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
@@ -1,5 +1,6 @@
 import { BooleanLike } from 'common/react';
 import { capitalize, createSearch } from 'common/string';
+import { useState } from 'react';
 import { useBackend, useLocalState } from '../backend';
 import {
   Box,
@@ -64,12 +65,9 @@ const findAmount = (item_amts, name) => {
 const ShoppingTab = (props) => {
   const { data, act } = useBackend<Data>();
   const { credit_type, order_categories, order_datums, item_amts } = data;
-  const [shopCategory, setShopCategory] = useLocalState(
-    'shopCategory',
-    order_categories[0],
-  );
+  const [shopCategory, setShopCategory] = useState(order_categories[0]);
   const [condensed] = useLocalState('condensed', false);
-  const [searchItem, setSearchItem] = useLocalState('searchItem', '');
+  const [searchItem, setSearchItem] = useState('');
   const search = createSearch<OrderDatum>(
     searchItem,
     (order_datums) => order_datums.name,
@@ -331,9 +329,10 @@ const OrderSent = (props) => {
 export const ProduceConsole = (props) => {
   const { data } = useBackend<Data>();
   const { credit_type, points, off_cooldown, order_categories } = data;
-  const [tabIndex, setTabIndex] = useLocalState('tab-index', 1);
+  const [tabIndex, setTabIndex] = useState(1);
   const [condensed, setCondensed] = useLocalState('condensed', false);
   const TabComponent = TAB2NAME[tabIndex - 1].component();
+
   return (
     <Window width={Math.max(order_categories.length * 125, 500)} height={400}>
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/RapidConstructionDevice.tsx b/tgui/packages/tgui/interfaces/RapidConstructionDevice.tsx
index d2ae0ce7126..3a9156f0638 100644
--- a/tgui/packages/tgui/interfaces/RapidConstructionDevice.tsx
+++ b/tgui/packages/tgui/interfaces/RapidConstructionDevice.tsx
@@ -1,9 +1,10 @@
 import { Window } from '../layouts';
 import { BooleanLike, classes } from 'common/react';
 import { capitalizeAll } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { LabeledList, Section, Button, Tabs, Stack, Box } from '../components';
 import { AirLockMainSection } from './AirlockElectronics';
+import { useState } from 'react';
 
 type Data = {
   matterLeft: number;
@@ -88,13 +89,11 @@ export const InfoSection = (props) => {
 const DesignSection = (props) => {
   const { act, data } = useBackend<Data>();
   const { categories = [], selected_category, selected_design } = data;
-  const [categoryName, setCategoryName] = useLocalState(
-    'categoryName',
-    selected_category,
-  );
+  const [categoryName, setCategoryName] = useState(selected_category);
   const shownCategory =
     categories.find((category) => category.cat_name === categoryName) ||
     categories[0];
+
   return (
     <Section fill scrollable>
       <Tabs>
diff --git a/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx b/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
index 058c99fdeb4..e2acbf36db0 100644
--- a/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
@@ -1,7 +1,8 @@
 import { BooleanLike, classes } from 'common/react';
 import { multiline } from 'common/string';
 import { capitalizeAll } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -255,13 +256,11 @@ const PreviewSelect = (props) => {
 const PipeTypeSection = (props) => {
   const { act, data } = useBackend<Data>();
   const { categories = [], selected_category, selected_recipe } = data;
-  const [categoryName, setCategoryName] = useLocalState(
-    'categoryName',
-    selected_category,
-  );
+  const [categoryName, setCategoryName] = useState(selected_category);
   const shownCategory =
     categories.find((category) => category.cat_name === categoryName) ||
     categories[0];
+
   return (
     <Section>
       <Tabs>
diff --git a/tgui/packages/tgui/interfaces/RapidPlumbingDevice.tsx b/tgui/packages/tgui/interfaces/RapidPlumbingDevice.tsx
index 093ee839ebe..55c47870a07 100644
--- a/tgui/packages/tgui/interfaces/RapidPlumbingDevice.tsx
+++ b/tgui/packages/tgui/interfaces/RapidPlumbingDevice.tsx
@@ -1,10 +1,11 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { capitalizeAll } from 'common/string';
 import { BooleanLike, classes } from 'common/react';
 import { Window } from '../layouts';
 import { Section, Tabs, Button, Stack, Box } from '../components';
 import { ColorItem, LayerSelect } from './RapidPipeDispenser';
 import { SiloItem, MatterItem } from './RapidConstructionDevice';
+import { useState } from 'react';
 
 type Data = {
   silo_upgraded: BooleanLike;
@@ -29,13 +30,11 @@ type Recipe = {
 const PlumbingTypeSection = (props) => {
   const { act, data } = useBackend<Data>();
   const { categories = [], selected_category, selected_recipe } = data;
-  const [categoryName, setCategoryName] = useLocalState(
-    'categoryName',
-    selected_category,
-  );
+  const [categoryName, setCategoryName] = useState(selected_category);
   const shownCategory =
     categories.find((category) => category.cat_name === categoryName) ||
     categories[0];
+
   return (
     <Section fill scrollable>
       <Tabs>
diff --git a/tgui/packages/tgui/interfaces/RapidTilingDevice.tsx b/tgui/packages/tgui/interfaces/RapidTilingDevice.tsx
index 682cb7e0718..3908cd001d6 100644
--- a/tgui/packages/tgui/interfaces/RapidTilingDevice.tsx
+++ b/tgui/packages/tgui/interfaces/RapidTilingDevice.tsx
@@ -1,9 +1,10 @@
 import { classes } from 'common/react';
 import { capitalizeAll } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Button, Section, Tabs, Stack } from '../components';
 import { InfoSection } from './RapidConstructionDevice';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 type Data = {
   selected_icon: string;
@@ -97,13 +98,11 @@ const TileRotateSection = (props) => {
 const TileDesignSection = (props) => {
   const { act, data } = useBackend<Data>();
   const { categories = [], selected_category, selected_recipe } = data;
-  const [categoryName, setCategoryName] = useLocalState(
-    'categoryName',
-    selected_category,
-  );
+  const [categoryName, setCategoryName] = useState(selected_category);
   const shownCategory =
     categories.find((category) => category.category_name === categoryName) ||
     categories[0];
+
   return (
     <Section fill scrollable>
       <Tabs>
diff --git a/tgui/packages/tgui/interfaces/ReligiousTool.jsx b/tgui/packages/tgui/interfaces/ReligiousTool.jsx
index 6cf0f5d3b7d..828bbc65789 100644
--- a/tgui/packages/tgui/interfaces/ReligiousTool.jsx
+++ b/tgui/packages/tgui/interfaces/ReligiousTool.jsx
@@ -22,6 +22,7 @@ export const ReligiousTool = (props) => {
   const { act, data } = useBackend();
   const [tab, setTab] = useSharedState('tab', 1);
   const { sects, alignment, toolname } = data;
+
   return (
     <Window title={toolname} width={560} height={500}>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/RequestsConsole/RequestsConsoleMainScreen.tsx b/tgui/packages/tgui/interfaces/RequestsConsole/RequestsConsoleMainScreen.tsx
index 0cb87ee6ed5..f3791baa915 100644
--- a/tgui/packages/tgui/interfaces/RequestsConsole/RequestsConsoleMainScreen.tsx
+++ b/tgui/packages/tgui/interfaces/RequestsConsole/RequestsConsoleMainScreen.tsx
@@ -8,7 +8,8 @@ import { AnnouncementTab } from './AnnouncementTab';
 export const RequestMainScreen = (props) => {
   const { act, data } = useBackend<RequestsData>();
   const { can_send_announcements } = data;
-  const [tab, setTab] = useSharedState('tab', 1);
+  const [tab, setTab] = useSharedState('tab', RequestTabs.MESSAGE_VIEW);
+
   return (
     <Stack.Item grow>
       <Stack vertical fill>
diff --git a/tgui/packages/tgui/interfaces/RoboticsControlConsole.jsx b/tgui/packages/tgui/interfaces/RoboticsControlConsole.jsx
index 92e1078a6f1..23ea2b3b0c0 100644
--- a/tgui/packages/tgui/interfaces/RoboticsControlConsole.jsx
+++ b/tgui/packages/tgui/interfaces/RoboticsControlConsole.jsx
@@ -13,6 +13,7 @@ export const RoboticsControlConsole = (props) => {
   const { act, data } = useBackend();
   const [tab, setTab] = useSharedState('tab', 1);
   const { can_hack, can_detonate, cyborgs = [], drones = [] } = data;
+
   return (
     <Window width={500} height={460}>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/Roulette.jsx b/tgui/packages/tgui/interfaces/Roulette.jsx
index f352b9082ad..c1bcb2ef0c7 100644
--- a/tgui/packages/tgui/interfaces/Roulette.jsx
+++ b/tgui/packages/tgui/interfaces/Roulette.jsx
@@ -1,7 +1,8 @@
 import { classes } from 'common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Button, Grid, NumberInput, Table } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 const getNumberColor = (number) => {
   const inRedOddRange =
@@ -153,7 +154,7 @@ export const RouletteBoard = () => {
 export const RouletteBetTable = (props) => {
   const { act, data } = useBackend();
 
-  const [customBet, setCustomBet] = useLocalState('customBet', 500);
+  const [customBet, setCustomBet] = useState(500);
 
   let { BetType } = data;
 
diff --git a/tgui/packages/tgui/interfaces/Secrets.jsx b/tgui/packages/tgui/interfaces/Secrets.jsx
index 9af68a897ae..b37a6213c04 100644
--- a/tgui/packages/tgui/interfaces/Secrets.jsx
+++ b/tgui/packages/tgui/interfaces/Secrets.jsx
@@ -1,5 +1,5 @@
 import { toFixed } from 'common/math';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Button,
   Flex,
@@ -10,6 +10,7 @@ import {
   Stack,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 const TAB2NAME = [
   {
@@ -631,8 +632,9 @@ const FunForYouTab = (props) => {
 export const Secrets = (props) => {
   const { act, data } = useBackend();
   const { is_debugger, is_funmin } = data;
-  const [tabIndex, setTabIndex] = useLocalState('tab-index', 2);
+  const [tabIndex, setTabIndex] = useState(2);
   const TabComponent = TAB2NAME[tabIndex - 1].component();
+
   return (
     <Window title="Secrets Panel" width={500} height={488} theme="admin">
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.tsx b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
index e94b25d6e75..e82ef4d0d9e 100644
--- a/tgui/packages/tgui/interfaces/SeedExtractor.tsx
+++ b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
@@ -2,7 +2,7 @@ import { classes } from 'common/react';
 import { createSearch } from 'common/string';
 import { flow } from 'common/fp';
 import { sortBy } from 'common/collections';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Input,
   Tooltip,
@@ -15,6 +15,7 @@ import {
   Icon,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 type TraitData = {
   path: string;
@@ -59,9 +60,9 @@ type SeedExtractorData = {
 
 export const SeedExtractor = (props) => {
   const { act, data } = useBackend<SeedExtractorData>();
-  const [searchText, setSearchText] = useLocalState('searchText', '');
-  const [sortField, setSortField] = useLocalState('sortField', 'name');
-  const [action, toggleAction] = useLocalState('action', true);
+  const [searchText, setSearchText] = useState('');
+  const [sortField, setSortField] = useState('name');
+  const [action, toggleAction] = useState(true);
   const search = createSearch(searchText, (item: SeedData) => item.name);
   const seeds_filtered =
     searchText.length > 0 ? data.seeds.filter(search) : data.seeds;
@@ -69,6 +70,7 @@ export const SeedExtractor = (props) => {
     sortBy((item: SeedData) => item[sortField as keyof SeedData]),
   ])(seeds_filtered || []);
   sortField !== 'name' && seeds.reverse();
+
   return (
     <Window width={800} height={500}>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/ServerMonitor.jsx b/tgui/packages/tgui/interfaces/ServerMonitor.jsx
index 7cc261a0e23..3cdd3037f45 100644
--- a/tgui/packages/tgui/interfaces/ServerMonitor.jsx
+++ b/tgui/packages/tgui/interfaces/ServerMonitor.jsx
@@ -1,4 +1,4 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Section,
   Stack,
@@ -11,10 +11,12 @@ import {
   NoticeBox,
 } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 const PacketInfo = (props) => {
   const { act, data } = useBackend();
   const { packet } = props;
+
   return (
     <Stack.Item>
       <Flex justify="space-between">
@@ -84,7 +86,7 @@ const ServerScreen = (props) => {
 const MainScreen = (props) => {
   const { act, data } = useBackend();
   const { servers, network } = data;
-  const [networkId, setNetworkId] = useLocalState('networkId', network);
+  const [networkId, setNetworkId] = useState(network);
 
   return (
     <Stack fill vertical>
diff --git a/tgui/packages/tgui/interfaces/ShuttleManipulator.jsx b/tgui/packages/tgui/interfaces/ShuttleManipulator.jsx
index 10074f0e984..430ed79e35d 100644
--- a/tgui/packages/tgui/interfaces/ShuttleManipulator.jsx
+++ b/tgui/packages/tgui/interfaces/ShuttleManipulator.jsx
@@ -1,10 +1,12 @@
 import { map } from 'common/collections';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Button, Flex, LabeledList, Section, Table, Tabs } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 export const ShuttleManipulator = (props) => {
-  const [tab, setTab] = useLocalState('tab', 1);
+  const [tab, setTab] = useState(1);
+
   return (
     <Window title="Shuttle Manipulator" width={800} height={600} theme="admin">
       <Window.Content scrollable>
@@ -91,11 +93,11 @@ export const ShuttleManipulatorTemplates = (props) => {
   const { act, data } = useBackend();
   const templateObject = data.templates || {};
   const selected = data.selected || {};
-  const [selectedTemplateId, setSelectedTemplateId] = useLocalState(
-    'templateId',
+  const [selectedTemplateId, setSelectedTemplateId] = useState(
     Object.keys(templateObject)[0],
   );
   const actualTemplates = templateObject[selectedTemplateId]?.templates || [];
+
   return (
     <Section>
       <Flex>
diff --git a/tgui/packages/tgui/interfaces/SparringContract.tsx b/tgui/packages/tgui/interfaces/SparringContract.tsx
index c109afafc70..e0b47a5d6ae 100644
--- a/tgui/packages/tgui/interfaces/SparringContract.tsx
+++ b/tgui/packages/tgui/interfaces/SparringContract.tsx
@@ -1,6 +1,7 @@
 import { BooleanLike } from 'common/react';
 import { multiline } from 'common/string';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { BlockQuote, Button, Dropdown, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
@@ -52,9 +53,10 @@ export const SparringContract = (props) => {
     no_chaplains,
     stakes_holy_match,
   } = data;
-  const [weapon, setWeapon] = useLocalState('weapon', set_weapon);
-  const [area, setArea] = useLocalState('area', set_area);
-  const [stakes, setStakes] = useLocalState('stakes', set_stakes);
+  const [weapon, setWeapon] = useState(set_weapon);
+  const [area, setArea] = useState(set_area);
+  const [stakes, setStakes] = useState(set_stakes);
+
   return (
     <Window width={420} height={380}>
       <Window.Content>
diff --git a/tgui/packages/tgui/interfaces/StackCrafting.tsx b/tgui/packages/tgui/interfaces/StackCrafting.tsx
index 5ec683e02d0..199639c5b82 100644
--- a/tgui/packages/tgui/interfaces/StackCrafting.tsx
+++ b/tgui/packages/tgui/interfaces/StackCrafting.tsx
@@ -1,6 +1,6 @@
 import { createSearch } from 'common/string';
 import { filter, map, reduce, sortBy } from 'common/collections';
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -13,6 +13,7 @@ import {
 import { Window } from '../layouts';
 import { clamp } from 'common/math';
 import { flow } from 'common/fp';
+import { useState } from 'react';
 
 type Recipe = {
   ref: unknown | null;
@@ -101,7 +102,7 @@ export const StackCrafting = (_props) => {
   const { data } = useBackend<StackCraftingProps>();
   const { amount, recipes = {} } = data;
 
-  const [searchText, setSearchText] = useLocalState('searchText', '');
+  const [searchText, setSearchText] = useState('');
   const testSearch = createSearch(searchText, (item: string) => item);
   const filteredRecipes = filterRecipeList(recipes, testSearch);
 
diff --git a/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx b/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx
index ce4ff4cf6f8..d92254695db 100644
--- a/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx
+++ b/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx
@@ -1,7 +1,8 @@
 import { filterMap } from 'common/collections';
 import { exhaustiveCheck } from 'common/exhaustive';
 import { BooleanLike } from 'common/react';
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Box, Button, Divider, Dropdown, Stack, Tabs } from '../components';
 import { Window } from '../layouts';
 
@@ -32,10 +33,7 @@ const FutureStationTraitsPage = (props) => {
   const { act, data } = useBackend<StationTraitsData>();
   const { future_station_traits } = data;
 
-  const [selectedTrait, setSelectedTrait] = useLocalState<string | null>(
-    'selectedFutureTrait',
-    null,
-  );
+  const [selectedTrait, setSelectedTrait] = useState<string | undefined>();
 
   const traitsByName = Object.fromEntries(
     data.valid_station_traits.map((trait) => {
@@ -209,10 +207,7 @@ const ViewStationTraitsPage = (props) => {
 };
 
 export const StationTraitsPanel = (props) => {
-  const [currentTab, setCurrentTab] = useLocalState(
-    'station_traits_tab',
-    Tab.ViewStationTraits,
-  );
+  const [currentTab, setCurrentTab] = useState(Tab.ViewStationTraits);
 
   let currentPage;
 
diff --git a/tgui/packages/tgui/interfaces/Supermatter.tsx b/tgui/packages/tgui/interfaces/Supermatter.tsx
index e32dbe2a919..20e4f2ccb65 100644
--- a/tgui/packages/tgui/interfaces/Supermatter.tsx
+++ b/tgui/packages/tgui/interfaces/Supermatter.tsx
@@ -2,8 +2,8 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { BooleanLike } from 'common/react';
-import { ReactNode } from 'react';
-import { useBackend, useLocalState } from '../backend';
+import { ReactNode, useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -75,7 +75,8 @@ const SupermatterEntry = (props: SupermatterEntryProps) => {
       </Stack.Item>
     );
   }
-  const [activeDetail, setActiveDetail] = useLocalState(title, false);
+  const [activeDetail, setActiveDetail] = useState(false);
+
   return (
     <>
       <Stack.Item>
@@ -120,11 +121,12 @@ export const SupermatterContent = (props: SupermatterProps) => {
     gas_total_moles,
     gas_metadata,
   } = props;
-  const [allGasActive, setAllGasActive] = useLocalState('allGasActive', false);
+  const [allGasActive, setAllGasActive] = useState(false);
   const gas_composition: [gas_path: string, amount: number][] = flow([
     !allGasActive && filter(([gas_path, amount]) => amount !== 0),
     sortBy(([gas_path, amount]) => -amount),
   ])(Object.entries(props.gas_composition));
+
   return (
     <Stack height="100%">
       <Stack.Item grow>
diff --git a/tgui/packages/tgui/interfaces/TankCompressor.jsx b/tgui/packages/tgui/interfaces/TankCompressor.jsx
index e2a0d04cb7d..6ac37ca800b 100644
--- a/tgui/packages/tgui/interfaces/TankCompressor.jsx
+++ b/tgui/packages/tgui/interfaces/TankCompressor.jsx
@@ -17,7 +17,6 @@ import { Window } from '../layouts';
 import { GasmixParser } from './common/GasmixParser';
 
 export const TankCompressor = (props) => {
-  const { act, data } = useBackend();
   return (
     <Window title="Tank Compressor" width={650} height={550}>
       <Window.Content>
@@ -31,6 +30,7 @@ const TankCompressorContent = (props) => {
   const { act, data } = useBackend();
   const { disk, storage } = data;
   const [currentTab, changeTab] = useSharedState('compressorTab', 1);
+
   return (
     <Stack vertical fill>
       {currentTab === 1 && <TankCompressorControls />}
@@ -69,7 +69,7 @@ const TankCompressorContent = (props) => {
 
 const AlertBoxes = (props) => {
   const { text_content, icon_name, icon_break, color, active } = props;
-  const { act, data } = useBackend();
+
   return (
     <Box
       bold
@@ -107,6 +107,7 @@ const TankCompressorControls = (props) => {
   } = data;
   const pressure = tankPresent ? tankPressure : lastPressure;
   const usingLastData = !!(lastPressure && !tankPresent);
+
   return (
     <>
       <Stack.Item>
@@ -273,83 +274,83 @@ const TankCompressorRecords = (props) => {
         <NoticeBox>No Records</NoticeBox>
       </Stack.Item>
     );
-  } else {
-    return (
-      <Stack.Item grow>
-        <Stack fill>
-          <Stack.Item mr={2}>
-            <Tabs vertical>
-              {records.map((record) => (
-                <Tabs.Tab
-                  icon="file"
-                  key={record.name}
-                  selected={record.ref === activeRecordRef}
-                  onClick={() => setActiveRecordRef(record.ref)}
-                >
-                  {record.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs>
-          </Stack.Item>
-          {activeRecord ? (
-            <Stack.Item grow>
-              <Section
-                title={activeRecord.name}
-                buttons={[
-                  <Button.Confirm
-                    key="delete"
-                    icon="trash"
-                    content="Delete"
-                    color="bad"
-                    onClick={() => {
-                      act('delete_record', {
-                        ref: activeRecord.ref,
-                      });
-                    }}
-                  />,
-                  <Button
-                    key="save"
-                    icon="floppy-disk"
-                    content="Save"
-                    disabled={!disk}
-                    tooltip="Save the record selected to an inserted data disk."
-                    tooltipPosition="bottom"
-                    onClick={() => {
-                      act('save_record', {
-                        ref: activeRecord.ref,
-                      });
-                    }}
-                  />,
-                ]}
-              >
-                <LabeledList>
-                  <LabeledList.Item label="Timestamp">
-                    {activeRecord.timestamp}
-                  </LabeledList.Item>
-                  <LabeledList.Item label="Source">
-                    {activeRecord.source}
-                  </LabeledList.Item>
-                  <LabeledList.Item label="Detected Gas">
-                    <LabeledList>
-                      {Object.keys(activeRecord.gases).map((gas_name) => (
-                        <LabeledList.Item label={gas_name} key={gas_name}>
-                          {(activeRecord.gases[gas_name]
-                            ? activeRecord.gases[gas_name].toFixed(2)
-                            : '-') + ' moles'}
-                        </LabeledList.Item>
-                      ))}
-                    </LabeledList>
-                  </LabeledList.Item>
-                </LabeledList>
-              </Section>
-            </Stack.Item>
-          ) : (
-            <Stack.Item grow={1} basis={0}>
-              <NoticeBox>No Record Selected</NoticeBox>
-            </Stack.Item>
-          )}
-        </Stack>
-      </Stack.Item>
-    );
   }
+
+  return (
+    <Stack.Item grow>
+      <Stack fill>
+        <Stack.Item mr={2}>
+          <Tabs vertical>
+            {records.map((record) => (
+              <Tabs.Tab
+                icon="file"
+                key={record.name}
+                selected={record.ref === activeRecordRef}
+                onClick={() => setActiveRecordRef(record.ref)}
+              >
+                {record.name}
+              </Tabs.Tab>
+            ))}
+          </Tabs>
+        </Stack.Item>
+        {activeRecord ? (
+          <Stack.Item grow>
+            <Section
+              title={activeRecord.name}
+              buttons={[
+                <Button.Confirm
+                  key="delete"
+                  icon="trash"
+                  content="Delete"
+                  color="bad"
+                  onClick={() => {
+                    act('delete_record', {
+                      ref: activeRecord.ref,
+                    });
+                  }}
+                />,
+                <Button
+                  key="save"
+                  icon="floppy-disk"
+                  content="Save"
+                  disabled={!disk}
+                  tooltip="Save the record selected to an inserted data disk."
+                  tooltipPosition="bottom"
+                  onClick={() => {
+                    act('save_record', {
+                      ref: activeRecord.ref,
+                    });
+                  }}
+                />,
+              ]}
+            >
+              <LabeledList>
+                <LabeledList.Item label="Timestamp">
+                  {activeRecord.timestamp}
+                </LabeledList.Item>
+                <LabeledList.Item label="Source">
+                  {activeRecord.source}
+                </LabeledList.Item>
+                <LabeledList.Item label="Detected Gas">
+                  <LabeledList>
+                    {Object.keys(activeRecord.gases).map((gas_name) => (
+                      <LabeledList.Item label={gas_name} key={gas_name}>
+                        {(activeRecord.gases[gas_name]
+                          ? activeRecord.gases[gas_name].toFixed(2)
+                          : '-') + ' moles'}
+                      </LabeledList.Item>
+                    ))}
+                  </LabeledList>
+                </LabeledList.Item>
+              </LabeledList>
+            </Section>
+          </Stack.Item>
+        ) : (
+          <Stack.Item grow={1} basis={0}>
+            <NoticeBox>No Record Selected</NoticeBox>
+          </Stack.Item>
+        )}
+      </Stack>
+    </Stack.Item>
+  );
 };
diff --git a/tgui/packages/tgui/interfaces/TelecommsMonitor.tsx b/tgui/packages/tgui/interfaces/TelecommsMonitor.tsx
index 11f256642df..55b3e0a8ff7 100644
--- a/tgui/packages/tgui/interfaces/TelecommsMonitor.tsx
+++ b/tgui/packages/tgui/interfaces/TelecommsMonitor.tsx
@@ -1,4 +1,5 @@
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import {
   Section,
   Stack,
@@ -92,7 +93,7 @@ const MachineScreen = (props) => {
 const MainScreen = (props) => {
   const { act, data } = useBackend<Data>();
   const { machinery = [], network } = data;
-  const [networkId, setNetworkId] = useLocalState('networkId', network);
+  const [networkId, setNetworkId] = useState(network);
 
   return (
     <Stack fill vertical>
diff --git a/tgui/packages/tgui/interfaces/TextInputModal.tsx b/tgui/packages/tgui/interfaces/TextInputModal.tsx
index 392ce99fe92..d02723b3723 100644
--- a/tgui/packages/tgui/interfaces/TextInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/TextInputModal.tsx
@@ -1,9 +1,10 @@
 import { Loader } from './common/Loader';
 import { InputButtons } from './common/InputButtons';
-import { useBackend, useLocalState } from '../backend';
-import { KEY_ENTER, KEY_ESCAPE } from '../../common/keycodes';
+import { useBackend } from '../backend';
 import { Box, Section, Stack, TextArea } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
+import { KEY } from 'common/keys';
 
 type TextInputData = {
   large_buttons: boolean;
@@ -30,11 +31,11 @@ export const TextInputModal = (props) => {
     max_length,
     message = '',
     multiline,
-    placeholder,
+    placeholder = '',
     timeout,
     title,
   } = data;
-  const [input, setInput] = useLocalState<string>('input', placeholder || '');
+  const [input, setInput] = useState(placeholder);
   const onType = (value: string) => {
     if (value === input) {
       return;
@@ -58,11 +59,13 @@ export const TextInputModal = (props) => {
       {timeout && <Loader value={timeout} />}
       <Window.Content
         onKeyDown={(event) => {
-          const keyCode = window.event ? event.which : event.keyCode;
-          if (keyCode === KEY_ENTER && (!visualMultiline || !event.shiftKey)) {
+          if (
+            event.key === KEY.Enter &&
+            (!visualMultiline || !event.shiftKey)
+          ) {
             act('submit', { entry: input });
           }
-          if (keyCode === KEY_ESCAPE) {
+          if (event.key === KEY.Escape) {
             act('cancel');
           }
         }}
diff --git a/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx b/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
index f3ba3a2fb21..4455c11fbb4 100644
--- a/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
+++ b/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
@@ -1,4 +1,5 @@
-import { useBackend, useLocalState } from '../backend';
+import { useState } from 'react';
+import { useBackend } from '../backend';
 import { Box, LabeledList, Stack, Tabs, Tooltip } from '../components';
 import { Window } from '../layouts';
 import { getDangerLevel } from './Uplink/calculateDangerLevel';
@@ -167,16 +168,10 @@ export const TraitorObjectiveDebug = (props) => {
     );
   }
   let objectivesToRender: Objective[] = [];
-  const [currentTab, setCurrentTab] = useLocalState('currentTab', 'All');
-  const [sortingFunc, setSortingFunc] = useLocalState(
-    'sortingFunc',
-    sortingOptions[0].name,
-  );
+  const [currentTab, setCurrentTab] = useState('All');
+  const [sortingFunc, setSortingFunc] = useState(sortingOptions[0].name);
   // true = ascending, false = descending
-  const [sortDirection, setSortingDirection] = useLocalState(
-    'sortDirection',
-    true,
-  );
+  const [sortDirection, setSortingDirection] = useState(true);
 
   let actualSortingFunc;
   for (let index = 0; index < sortingOptions.length; index++) {
diff --git a/tgui/packages/tgui/interfaces/TramControl.jsx b/tgui/packages/tgui/interfaces/TramControl.jsx
index 358f08c7f8b..fcb536b73ac 100644
--- a/tgui/packages/tgui/interfaces/TramControl.jsx
+++ b/tgui/packages/tgui/interfaces/TramControl.jsx
@@ -1,6 +1,7 @@
-import { useBackend, useLocalState } from '../backend';
+import { useBackend } from '../backend';
 import { Box, Button, Dimmer, Icon, Section, Stack } from '../components';
 import { Window } from '../layouts';
+import { useState } from 'react';
 
 const DEPARTMENT2COLOR = {
   // Station
@@ -39,91 +40,12 @@ const dipUnderCircle = (dest, dep) => {
   return dipped ? marginDipped : marginNormal;
 };
 
-const BrokenTramDimmer = () => {
-  return (
-    <Dimmer>
-      <Stack vertical>
-        <Stack.Item>
-          <Icon ml={7} color="red" name="triangle-exclamation" size={10} />
-        </Stack.Item>
-        <Stack.Item fontSize="14px" color="red">
-          Check Tram Controller!
-        </Stack.Item>
-      </Stack>
-    </Dimmer>
-  );
-};
-
 export const TramControl = (props) => {
   const { act, data } = useBackend();
   const { broken, moving, destinations, tram_location } = data;
 
-  const [transitIndex, setTransitIndex] = useLocalState('transit-index', 1);
-  const MovingTramDimmer = () => {
-    return (
-      <Dimmer>
-        <Stack vertical>
-          <Stack.Item>
-            <Icon ml={10} name="sync-alt" color="green" size={11} />
-          </Stack.Item>
-          <Stack.Item mt={5} fontSize="14px" color="green">
-            The tram is travelling to {tram_location}!
-          </Stack.Item>
-        </Stack>
-      </Dimmer>
-    );
-  };
-  const Destination = (props) => {
-    const { dest } = props;
-    const getDestColor = (dest) => {
-      if (!tram_location) return 'bad';
-      const here = dest.name === tram_location;
-      const selected = transitIndex === destinations.indexOf(dest);
-      return here ? 'blue' : selected ? 'green' : 'transparent';
-    };
-    return (
-      <Stack vertical>
-        <Stack.Item ml={5}>
-          <Button
-            mr={4.38}
-            color={getDestColor(dest)}
-            circular
-            compact
-            height={4.9}
-            width={4.9}
-            tooltipPosition="top"
-            tooltip={COLOR2BLURB[getDestColor(dest)]}
-            onClick={() => setTransitIndex(destinations.indexOf(dest))}
-          >
-            <Icon ml={-2.1} fontSize="60px" name="circle-o" />
-          </Button>
-          {(destinations.length - 1 !== destinations.indexOf(dest) && (
-            <Section title=" " mt={-7.3} ml={10} mr={-6.1} />
-          )) || <Box mt={-2.3} />}
-        </Stack.Item>
-        {dest.dest_icons && (
-          <Stack.Item>
-            <Stack>
-              {Object.keys(dest.dest_icons).map((dep) => (
-                <Stack.Item key={dep} mt={dipUnderCircle(dest, dep)}>
-                  <Button
-                    color={DEPARTMENT2COLOR[dep]}
-                    icon={dest.dest_icons[dep]}
-                    tooltipPosition="bottom"
-                    tooltip={dep}
-                    style={{
-                      borderRadius: '5em',
-                      border: '2px solid white',
-                    }}
-                  />
-                </Stack.Item>
-              ))}
-            </Stack>
-          </Stack.Item>
-        )}
-      </Stack>
-    );
-  };
+  const [transitIndex, setTransitIndex] = useState(1);
+
   return (
     <Window title="Tram Controls" width={600} height={300}>
       <Window.Content>
@@ -139,7 +61,11 @@ export const TramControl = (props) => {
                   <Stack.Item grow />
                   {destinations.map((dest) => (
                     <Stack.Item key={dest.name} grow={1}>
-                      <Destination dest={dest} />
+                      <Destination
+                        dest={dest}
+                        transitIndex={transitIndex}
+                        setTransitIndex={setTransitIndex}
+                      />
                     </Stack.Item>
                   ))}
                   <Stack.Item grow={1} />
@@ -163,3 +89,86 @@ export const TramControl = (props) => {
     </Window>
   );
 };
+
+const BrokenTramDimmer = () => {
+  return (
+    <Dimmer>
+      <Stack vertical>
+        <Stack.Item>
+          <Icon ml={7} color="red" name="triangle-exclamation" size={10} />
+        </Stack.Item>
+        <Stack.Item fontSize="14px" color="red">
+          Check Tram Controller!
+        </Stack.Item>
+      </Stack>
+    </Dimmer>
+  );
+};
+
+const MovingTramDimmer = () => {
+  return (
+    <Dimmer>
+      <Stack vertical>
+        <Stack.Item>
+          <Icon ml={10} name="sync-alt" color="green" size={11} />
+        </Stack.Item>
+        <Stack.Item mt={5} fontSize="14px" color="green">
+          The tram is travelling to {tram_location}!
+        </Stack.Item>
+      </Stack>
+    </Dimmer>
+  );
+};
+
+const Destination = (props) => {
+  const { dest, setTransitIndex, transitIndex } = props;
+  const getDestColor = (dest) => {
+    if (!tram_location) return 'bad';
+    const here = dest.name === tram_location;
+    const selected = transitIndex === destinations.indexOf(dest);
+    return here ? 'blue' : selected ? 'green' : 'transparent';
+  };
+
+  return (
+    <Stack vertical>
+      <Stack.Item ml={5}>
+        <Button
+          mr={4.38}
+          color={getDestColor(dest)}
+          circular
+          compact
+          height={4.9}
+          width={4.9}
+          tooltipPosition="top"
+          tooltip={COLOR2BLURB[getDestColor(dest)]}
+          onClick={() => setTransitIndex(destinations.indexOf(dest))}
+        >
+          <Icon ml={-2.1} fontSize="60px" name="circle-o" />
+        </Button>
+        {(destinations.length - 1 !== destinations.indexOf(dest) && (
+          <Section title=" " mt={-7.3} ml={10} mr={-6.1} />
+        )) || <Box mt={-2.3} />}
+      </Stack.Item>
+      {dest.dest_icons && (
+        <Stack.Item>
+          <Stack>
+            {Object.keys(dest.dest_icons).map((dep) => (
+              <Stack.Item key={dep} mt={dipUnderCircle(dest, dep)}>
+                <Button
+                  color={DEPARTMENT2COLOR[dep]}
+                  icon={dest.dest_icons[dep]}
+                  tooltipPosition="bottom"
+                  tooltip={dep}
+                  style={{
+                    borderRadius: '5em',
+                    border: '2px solid white',
+                  }}
+                />
+              </Stack.Item>
+            ))}
+          </Stack>
+        </Stack.Item>
+      )}
+    </Stack>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
index 21d5d5862da..a8571153df6 100644
--- a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
@@ -1,5 +1,5 @@
 import { BooleanLike } from 'common/react';
-import { useLocalState, useSharedState } from '../../backend';
+import { useState } from 'react';
 import {
   Box,
   Button,
@@ -14,7 +14,6 @@ type GenericUplinkProps = {
   currency?: string | JSX.Element;
   categories: string[];
   items: Item[];
-
   handleBuy: (item: Item) => void;
 };
 
@@ -25,21 +24,16 @@ export const GenericUplink = (props: GenericUplinkProps) => {
 
     handleBuy,
   } = props;
-  const [searchText, setSearchText] = useLocalState('searchText', '');
-  const [selectedCategory, setSelectedCategory] = useLocalState(
-    'category',
-    categories[0],
-  );
-  const [compactMode, setCompactMode] = useSharedState(
-    'compactModeUplink',
-    false,
-  );
+  const [searchText, setSearchText] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState(categories[0]);
+  const [compactMode, setCompactMode] = useState(false);
   let items = props.items.filter((value) => {
     if (searchText.length === 0) {
       return value.category === selectedCategory;
     }
     return value.name.toLowerCase().includes(searchText.toLowerCase());
   });
+
   return (
     <Section
       title={<Box inline>{currency}</Box>}
@@ -95,14 +89,13 @@ export const GenericUplink = (props: GenericUplinkProps) => {
   );
 };
 
-export type Item<ItemData = {}> = {
+export type Item = {
   id: string | number;
   name: string;
   category: string;
   cost: JSX.Element | string;
   desc: JSX.Element | string;
   disabled: BooleanLike;
-  extraData?: ItemData;
 };
 
 export type ItemListProps = {
diff --git a/tgui/packages/tgui/interfaces/Uplink/index.tsx b/tgui/packages/tgui/interfaces/Uplink/index.tsx
index 22ecd1e30f4..843963b4b7f 100644
--- a/tgui/packages/tgui/interfaces/Uplink/index.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/index.tsx
@@ -86,8 +86,10 @@ type ServerData = {
   categories: string[];
 };
 
-type ItemExtraData = {
-  ref?: string | undefined;
+type ItemExtraData = Item & {
+  extraData: {
+    ref?: string;
+  };
 };
 
 // Cache response so it's only sent once
@@ -195,7 +197,7 @@ export class Uplink extends Component<{}, UplinkState> {
     const { allItems, allCategories, currentTab } = this.state as UplinkState;
 
     const itemsToAdd = [...allItems];
-    const items: Item<ItemExtraData>[] = [];
+    const items: ItemExtraData[] = [];
     itemsToAdd.push(...extra_purchasable);
     for (let i = 0; i < extra_purchasable.length; i++) {
       const item = extra_purchasable[i];
@@ -444,12 +446,11 @@ export class Uplink extends Component<{}, UplinkState> {
                       currency=""
                       categories={allCategories}
                       items={items}
-                      handleBuy={(item) => {
-                        const extraDataItem = item as Item<ItemExtraData>;
-                        if (!extraDataItem.extraData?.ref) {
+                      handleBuy={(item: ItemExtraData) => {
+                        if (!item.extraData?.ref) {
                           act('buy', { path: item.id });
                         } else {
-                          act('buy', { ref: extraDataItem.extraData.ref });
+                          act('buy', { ref: item.extraData.ref });
                         }
                       }}
                     />