diff --git a/packages/webamp-modern/package.json b/packages/webamp-modern/package.json
index 4a6402a4..a1b4a16a 100644
--- a/packages/webamp-modern/package.json
+++ b/packages/webamp-modern/package.json
@@ -132,6 +132,8 @@
   "dependencies": {
     "eslint-plugin-react-hooks": "^2.1.2",
     "fscreen": "^1.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-dropzone": "^10.1.7",
     "redux-sentry-middleware": "^0.1.3",
     "xml-js": "^1.6.11"
diff --git a/packages/webamp/.babelrc b/packages/webamp/.babelrc
index ce4b793b..e39b2d51 100644
--- a/packages/webamp/.babelrc
+++ b/packages/webamp/.babelrc
@@ -18,7 +18,13 @@
         }
       }
     ],
-    "@babel/preset-react",
+    // TODO: Can TypeScript just do this for us?
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
     "@babel/preset-typescript"
   ],
   "plugins": [
diff --git a/packages/webamp/.eslintrc b/packages/webamp/.eslintrc
index 8316f091..fb9fde6c 100644
--- a/packages/webamp/.eslintrc
+++ b/packages/webamp/.eslintrc
@@ -143,7 +143,7 @@
     "no-return-await": "error",
     "react/no-string-refs": "error",
     "react/jsx-boolean-value": "error",
-    "react/jsx-uses-react": "error",
+    "react/jsx-uses-react": "off",
     "react/jsx-uses-vars": "error",
     "react/prefer-es6-class": "error",
     "react/jsx-pascal-case": "error",
diff --git a/packages/webamp/demo/js/DemoDesktop.tsx b/packages/webamp/demo/js/DemoDesktop.tsx
index 61b4af08..b136bfb6 100644
--- a/packages/webamp/demo/js/DemoDesktop.tsx
+++ b/packages/webamp/demo/js/DemoDesktop.tsx
@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import WebampIcon from "./WebampIcon";
 // import Mp3Icon from "./Mp3Icon";
 import SkinIcon from "./SkinIcon";
diff --git a/packages/webamp/demo/js/DesktopIcon.tsx b/packages/webamp/demo/js/DesktopIcon.tsx
index d76753f1..cd14b1c9 100644
--- a/packages/webamp/demo/js/DesktopIcon.tsx
+++ b/packages/webamp/demo/js/DesktopIcon.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 import IconImage from "./IconImage";
 
diff --git a/packages/webamp/demo/js/DesktopLinkIcon.tsx b/packages/webamp/demo/js/DesktopLinkIcon.tsx
index 08130604..b6c61d42 100644
--- a/packages/webamp/demo/js/DesktopLinkIcon.tsx
+++ b/packages/webamp/demo/js/DesktopLinkIcon.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 import IconImage from "./IconImage";
 
diff --git a/packages/webamp/demo/js/IconImage.tsx b/packages/webamp/demo/js/IconImage.tsx
index 6fc1b74c..fe48927c 100644
--- a/packages/webamp/demo/js/IconImage.tsx
+++ b/packages/webamp/demo/js/IconImage.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import SuspenseImage from "./SuspenseImage";
 
 type Props = {
diff --git a/packages/webamp/demo/js/MilkIcon.tsx b/packages/webamp/demo/js/MilkIcon.tsx
index 29b85be2..f69db8d5 100644
--- a/packages/webamp/demo/js/MilkIcon.tsx
+++ b/packages/webamp/demo/js/MilkIcon.tsx
@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore
diff --git a/packages/webamp/demo/js/Mp3Icon.tsx b/packages/webamp/demo/js/Mp3Icon.tsx
index 2d017dcb..02c49efe 100644
--- a/packages/webamp/demo/js/Mp3Icon.tsx
+++ b/packages/webamp/demo/js/Mp3Icon.tsx
@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore
diff --git a/packages/webamp/demo/js/SkinIcon.tsx b/packages/webamp/demo/js/SkinIcon.tsx
index a8459ca0..25f5e865 100644
--- a/packages/webamp/demo/js/SkinIcon.tsx
+++ b/packages/webamp/demo/js/SkinIcon.tsx
@@ -1,5 +1,4 @@
 import WebampLazy from "../../js/webampLazy";
-import React from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/paint-file-32x32.png";
 import DesktopIcon from "./DesktopIcon";
diff --git a/packages/webamp/demo/js/SuspenseImage.tsx b/packages/webamp/demo/js/SuspenseImage.tsx
index 435fb776..c15f7be2 100644
--- a/packages/webamp/demo/js/SuspenseImage.tsx
+++ b/packages/webamp/demo/js/SuspenseImage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 // A Resource is an object with a read method returning the payload
 interface Resource<Payload> {
diff --git a/packages/webamp/demo/js/WebampIcon.tsx b/packages/webamp/demo/js/WebampIcon.tsx
index 1725c718..621d6d59 100644
--- a/packages/webamp/demo/js/WebampIcon.tsx
+++ b/packages/webamp/demo/js/WebampIcon.tsx
@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/winamp2-32x32.png";
 import DesktopIcon from "./DesktopIcon";
diff --git a/packages/webamp/demo/js/index.js b/packages/webamp/demo/js/index.js
index f805afd4..1b9d8264 100644
--- a/packages/webamp/demo/js/index.js
+++ b/packages/webamp/demo/js/index.js
@@ -1,7 +1,6 @@
 /* global SENTRY_DSN */
 
 import * as Sentry from "@sentry/browser";
-import React from "react";
 import ReactDOM from "react-dom";
 import createMiddleware from "redux-sentry-middleware";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
diff --git a/packages/webamp/js/components/App.tsx b/packages/webamp/js/components/App.tsx
index 683113cc..35d5d308 100644
--- a/packages/webamp/js/components/App.tsx
+++ b/packages/webamp/js/components/App.tsx
@@ -1,8 +1,9 @@
-import React, {
+import {
   useLayoutEffect,
   useEffect,
   useState,
   useCallback,
+  StrictMode,
 } from "react";
 import ReactDOM from "react-dom";
 import { FilePicker } from "../types";
@@ -127,7 +128,7 @@ export default function App({ media, filePickers }: Props) {
   }
 
   return ReactDOM.createPortal(
-    <React.StrictMode>
+    <StrictMode>
       <div onBlur={handleBlur}>
         <Skin />
         <ContextMenuWrapper
@@ -136,7 +137,7 @@ export default function App({ media, filePickers }: Props) {
           <WindowManager windows={renderWindows()} />
         </ContextMenuWrapper>
       </div>
-    </React.StrictMode>,
+    </StrictMode>,
     webampNode
   );
 }
diff --git a/packages/webamp/js/components/Balance.tsx b/packages/webamp/js/components/Balance.tsx
index 0842d93e..3b479ee5 100644
--- a/packages/webamp/js/components/Balance.tsx
+++ b/packages/webamp/js/components/Balance.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
diff --git a/packages/webamp/js/components/Character.tsx b/packages/webamp/js/components/Character.tsx
index 220bdd11..a563e66d 100644
--- a/packages/webamp/js/components/Character.tsx
+++ b/packages/webamp/js/components/Character.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import deburr from "lodash/deburr";
 
 interface Props extends React.HTMLAttributes<HTMLSpanElement> {
diff --git a/packages/webamp/js/components/CharacterString.tsx b/packages/webamp/js/components/CharacterString.tsx
index db46c43d..864c80ec 100644
--- a/packages/webamp/js/components/CharacterString.tsx
+++ b/packages/webamp/js/components/CharacterString.tsx
@@ -1,19 +1,19 @@
-import React from "react";
+import { memo, Fragment } from "react";
 import Character from "./Character";
 
 interface Props {
   children: string;
 }
 
-const CharacterString = React.memo((props: Props) => {
+const CharacterString = memo((props: Props) => {
   const text = `${props.children}` || "";
   const chars = text.split("");
   return (
-    <React.Fragment>
+    <Fragment>
       {chars.map((character, index) => (
         <Character key={index + character}>{character}</Character>
       ))}
-    </React.Fragment>
+    </Fragment>
   );
 });
 
diff --git a/packages/webamp/js/components/ClickedDiv.tsx b/packages/webamp/js/components/ClickedDiv.tsx
index f928a6a6..c9826b65 100644
--- a/packages/webamp/js/components/ClickedDiv.tsx
+++ b/packages/webamp/js/components/ClickedDiv.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import classnames from "classnames";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/webamp/js/components/ClipPaths.tsx b/packages/webamp/js/components/ClipPaths.tsx
index 158b75ba..4c4efca2 100644
--- a/packages/webamp/js/components/ClipPaths.tsx
+++ b/packages/webamp/js/components/ClipPaths.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useLayoutEffect } from "react";
+import { useMemo, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 
 type Props = {
diff --git a/packages/webamp/js/components/ContextMenu.tsx b/packages/webamp/js/components/ContextMenu.tsx
index 1bee2615..541e3253 100644
--- a/packages/webamp/js/components/ContextMenu.tsx
+++ b/packages/webamp/js/components/ContextMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from "react";
+import { useMemo, useEffect } from "react";
 import { createPortal } from "react-dom";
 import classnames from "classnames";
 
diff --git a/packages/webamp/js/components/ContextMenuTarget.tsx b/packages/webamp/js/components/ContextMenuTarget.tsx
index 5860ceee..3d691a2c 100644
--- a/packages/webamp/js/components/ContextMenuTarget.tsx
+++ b/packages/webamp/js/components/ContextMenuTarget.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import ContextMenu from "./ContextMenu";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/webamp/js/components/ContextMenuWrapper.tsx b/packages/webamp/js/components/ContextMenuWrapper.tsx
index b7df6ddd..0bde9fd6 100644
--- a/packages/webamp/js/components/ContextMenuWrapper.tsx
+++ b/packages/webamp/js/components/ContextMenuWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState, useEffect, useCallback } from "react";
+import { ReactNode, useState, useEffect, useCallback } from "react";
 import ContextMenu from "./ContextMenu";
 
 interface Props {
diff --git a/packages/webamp/js/components/DropTarget.tsx b/packages/webamp/js/components/DropTarget.tsx
index 80a321fd..ace68561 100644
--- a/packages/webamp/js/components/DropTarget.tsx
+++ b/packages/webamp/js/components/DropTarget.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useActionCreator } from "../hooks";
 import * as Actions from "../actionCreators";
 import { WindowId } from "../types";
diff --git a/packages/webamp/js/components/EqualizerWindow/Band.tsx b/packages/webamp/js/components/EqualizerWindow/Band.tsx
index 4088c76c..76dcd619 100644
--- a/packages/webamp/js/components/EqualizerWindow/Band.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/Band.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import Slider from "rc-slider";
 import { Slider as SliderType } from "../../types";
 import { useTypedSelector, useActionCreator } from "../../hooks";
diff --git a/packages/webamp/js/components/EqualizerWindow/EqAuto.tsx b/packages/webamp/js/components/EqualizerWindow/EqAuto.tsx
index 29a73131..e79ec1cc 100644
--- a/packages/webamp/js/components/EqualizerWindow/EqAuto.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/EqAuto.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Actions from "../../actionCreators";
 import { useTypedSelector, useActionCreator } from "../../hooks";
 
-const EqAuto = React.memo(() => {
+const EqAuto = memo(() => {
   const selected = useTypedSelector((state) => state.equalizer.auto);
   const toggleAuto = useActionCreator(Actions.toggleEqAuto);
   return (
diff --git a/packages/webamp/js/components/EqualizerWindow/EqGraph.tsx b/packages/webamp/js/components/EqualizerWindow/EqGraph.tsx
index fba2348e..89d23bbc 100644
--- a/packages/webamp/js/components/EqualizerWindow/EqGraph.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/EqGraph.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useLayoutEffect } from "react";
+import { useState, useMemo, useLayoutEffect } from "react";
 import { percentToRange, clamp } from "../../utils";
 import { BANDS } from "../../constants";
 import spline from "./spline";
diff --git a/packages/webamp/js/components/EqualizerWindow/EqOn.tsx b/packages/webamp/js/components/EqualizerWindow/EqOn.tsx
index 36d5794f..7cac0e7e 100644
--- a/packages/webamp/js/components/EqualizerWindow/EqOn.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/EqOn.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import classnames from "classnames";
 
 import * as Actions from "../../actionCreators";
diff --git a/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx b/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx
index affbab13..34d58e50 100644
--- a/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Volume from "../Volume";
 import Balance from "../Balance";
 import { segment } from "../../utils";
diff --git a/packages/webamp/js/components/EqualizerWindow/PresetsContextMenu.tsx b/packages/webamp/js/components/EqualizerWindow/PresetsContextMenu.tsx
index 123abc56..9578e566 100644
--- a/packages/webamp/js/components/EqualizerWindow/PresetsContextMenu.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/PresetsContextMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import builtin from "../../../presets/builtin.json";
 import * as Actions from "../../actionCreators";
 import { Node, Parent, Hr } from "../ContextMenu";
diff --git a/packages/webamp/js/components/EqualizerWindow/index.test.js b/packages/webamp/js/components/EqualizerWindow/index.test.js
index ae9be5f7..f479dca7 100644
--- a/packages/webamp/js/components/EqualizerWindow/index.test.js
+++ b/packages/webamp/js/components/EqualizerWindow/index.test.js
@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
 import getStore from "../../store";
diff --git a/packages/webamp/js/components/EqualizerWindow/index.tsx b/packages/webamp/js/components/EqualizerWindow/index.tsx
index c1afecf3..69de4566 100644
--- a/packages/webamp/js/components/EqualizerWindow/index.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import classnames from "classnames";
 
 import { BANDS, WINDOWS } from "../../constants";
diff --git a/packages/webamp/js/components/FocusTarget.tsx b/packages/webamp/js/components/FocusTarget.tsx
index 7cb26e90..1886235b 100644
--- a/packages/webamp/js/components/FocusTarget.tsx
+++ b/packages/webamp/js/components/FocusTarget.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect } from "react";
+import { useCallback, useState, useEffect } from "react";
 import { WindowId } from "../types";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
diff --git a/packages/webamp/js/components/Fullscreen.tsx b/packages/webamp/js/components/Fullscreen.tsx
index a8720176..da9dda8b 100644
--- a/packages/webamp/js/components/Fullscreen.tsx
+++ b/packages/webamp/js/components/Fullscreen.tsx
@@ -1,5 +1,5 @@
 // Adapted from https://github.com/snakesilk/react-fullscreen
-import React, { ReactNode, useRef, useLayoutEffect, useEffect } from "react";
+import { ReactNode, useRef, useLayoutEffect, useEffect } from "react";
 import fscreen from "fscreen";
 
 interface Props {
diff --git a/packages/webamp/js/components/GenWindow/index.tsx b/packages/webamp/js/components/GenWindow/index.tsx
index 52faff98..f3facd8c 100644
--- a/packages/webamp/js/components/GenWindow/index.tsx
+++ b/packages/webamp/js/components/GenWindow/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import "../../../css/gen-window.css";
 
diff --git a/packages/webamp/js/components/MainWindow/ActionButtons.tsx b/packages/webamp/js/components/MainWindow/ActionButtons.tsx
index 6577b4c5..4da7e2b3 100644
--- a/packages/webamp/js/components/MainWindow/ActionButtons.tsx
+++ b/packages/webamp/js/components/MainWindow/ActionButtons.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { memo } from "react";
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const ActionButtons = React.memo(() => {
+const ActionButtons = memo(() => {
   const previous = useActionCreator(Actions.previous);
   const play = useActionCreator(Actions.play);
   const pause = useActionCreator(Actions.pause);
diff --git a/packages/webamp/js/components/MainWindow/Close.tsx b/packages/webamp/js/components/MainWindow/Close.tsx
index d24032d0..639580b4 100644
--- a/packages/webamp/js/components/MainWindow/Close.tsx
+++ b/packages/webamp/js/components/MainWindow/Close.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import ClickedDiv from "../ClickedDiv";
 import { useActionCreator } from "../../hooks";
 
 import * as Actions from "../../actionCreators";
 
-const Close = React.memo(() => {
+const Close = memo(() => {
   const close = useActionCreator(Actions.close);
   return <ClickedDiv id="close" onClick={close} title="Close" />;
 });
diff --git a/packages/webamp/js/components/MainWindow/ClutterBar.tsx b/packages/webamp/js/components/MainWindow/ClutterBar.tsx
index ab05b02a..595646a7 100644
--- a/packages/webamp/js/components/MainWindow/ClutterBar.tsx
+++ b/packages/webamp/js/components/MainWindow/ClutterBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Actions from "../../actionCreators";
@@ -19,7 +19,7 @@ function mouseUp(): Thunk {
   };
 }
 
-const ClutterBar = React.memo(() => {
+const ClutterBar = memo(() => {
   const handleMouseDown = useActionCreator(setFocusDouble);
   const handleMouseUp = useActionCreator(mouseUp);
   const doubled = useTypedSelector(Selectors.getDoubled);
diff --git a/packages/webamp/js/components/MainWindow/Eject.tsx b/packages/webamp/js/components/MainWindow/Eject.tsx
index ce7a59a6..8faa61a6 100644
--- a/packages/webamp/js/components/MainWindow/Eject.tsx
+++ b/packages/webamp/js/components/MainWindow/Eject.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const Eject = React.memo(() => {
+const Eject = memo(() => {
   const openMediaFileDialog = useActionCreator(Actions.openMediaFileDialog);
   return <div id="eject" onClick={openMediaFileDialog} title="Open File(s)" />;
 });
diff --git a/packages/webamp/js/components/MainWindow/EqToggleButton.tsx b/packages/webamp/js/components/MainWindow/EqToggleButton.tsx
index 0894d0c7..aecde204 100644
--- a/packages/webamp/js/components/MainWindow/EqToggleButton.tsx
+++ b/packages/webamp/js/components/MainWindow/EqToggleButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Selectors from "../../selectors";
@@ -9,7 +9,7 @@ function toggleEqualizer() {
   return Actions.toggleWindow("equalizer");
 }
 
-const EqToggleButton = React.memo(() => {
+const EqToggleButton = memo(() => {
   const handleClick = useActionCreator(toggleEqualizer);
   const windowOpen = useTypedSelector(Selectors.getWindowOpen)("equalizer");
   return (
diff --git a/packages/webamp/js/components/MainWindow/Kbps.tsx b/packages/webamp/js/components/MainWindow/Kbps.tsx
index 73512baf..b325a045 100644
--- a/packages/webamp/js/components/MainWindow/Kbps.tsx
+++ b/packages/webamp/js/components/MainWindow/Kbps.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 
 import CharacterString from "../CharacterString";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
-const Kbps = React.memo(() => {
+const Kbps = memo(() => {
   const kbps = useTypedSelector(Selectors.getKbps);
   return (
     <div id="kbps">
diff --git a/packages/webamp/js/components/MainWindow/Khz.tsx b/packages/webamp/js/components/MainWindow/Khz.tsx
index 53c4ee54..96c6f5a7 100644
--- a/packages/webamp/js/components/MainWindow/Khz.tsx
+++ b/packages/webamp/js/components/MainWindow/Khz.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 
 import CharacterString from "../CharacterString";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
-const Khz = React.memo(() => {
+const Khz = memo(() => {
   const khz = useTypedSelector(Selectors.getKhz);
   return (
     <div id="khz">
diff --git a/packages/webamp/js/components/MainWindow/MainBalance.tsx b/packages/webamp/js/components/MainWindow/MainBalance.tsx
index a8d334be..e5009e72 100644
--- a/packages/webamp/js/components/MainWindow/MainBalance.tsx
+++ b/packages/webamp/js/components/MainWindow/MainBalance.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 
 import Balance from "../Balance";
 import * as Selectors from "../../selectors";
@@ -11,7 +11,7 @@ export const offsetFromBalance = (balance: number): number => {
   return offset;
 };
 
-const MainBalance = React.memo(() => {
+const MainBalance = memo(() => {
   const balance = useTypedSelector(Selectors.getBalance);
   return (
     <Balance
diff --git a/packages/webamp/js/components/MainWindow/MainContextMenu.tsx b/packages/webamp/js/components/MainWindow/MainContextMenu.tsx
index 20d3206a..550b85c8 100644
--- a/packages/webamp/js/components/MainWindow/MainContextMenu.tsx
+++ b/packages/webamp/js/components/MainWindow/MainContextMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { memo, Fragment, useEffect } from "react";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
 import { LOAD_STYLE } from "../../constants";
@@ -13,7 +13,7 @@ interface Props {
   filePickers: FilePicker[];
 }
 
-const MainContextMenu = React.memo(({ filePickers }: Props) => {
+const MainContextMenu = memo(({ filePickers }: Props) => {
   const networkConnected = useTypedSelector(Selectors.getNetworkConnected);
   const genWindows = useTypedSelector(Selectors.getGenWindows);
 
@@ -29,7 +29,7 @@ const MainContextMenu = React.memo(({ filePickers }: Props) => {
   }, [menuOpened]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <LinkNode
         href="https://webamp.org/about"
         target="_blank"
@@ -79,7 +79,7 @@ const MainContextMenu = React.memo(({ filePickers }: Props) => {
       </Parent>
       <Hr />
       <Node onClick={close} label="Exit" />
-    </React.Fragment>
+    </Fragment>
   );
 });
 
diff --git a/packages/webamp/js/components/MainWindow/MainVolume.tsx b/packages/webamp/js/components/MainWindow/MainVolume.tsx
index 142c75e2..0e0528dd 100644
--- a/packages/webamp/js/components/MainWindow/MainVolume.tsx
+++ b/packages/webamp/js/components/MainWindow/MainVolume.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import * as Selectors from "../../selectors";
 
 import Volume from "../Volume";
 import { useTypedSelector } from "../../hooks";
 
-const MainVolume = React.memo(() => {
+const MainVolume = memo(() => {
   const volume = useTypedSelector(Selectors.getVolume);
   const percent = volume / 100;
   const sprite = Math.round(percent * 28);
diff --git a/packages/webamp/js/components/MainWindow/Marquee.tsx b/packages/webamp/js/components/MainWindow/Marquee.tsx
index 69464d07..51bf46d8 100644
--- a/packages/webamp/js/components/MainWindow/Marquee.tsx
+++ b/packages/webamp/js/components/MainWindow/Marquee.tsx
@@ -1,6 +1,6 @@
 // Single line text display that can animate and hold multiple registers
 // Knows how to display various modes like tracking, volume, balance, etc.
-import React from "react";
+import * as React from "react";
 import CharacterString from "../CharacterString";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
diff --git a/packages/webamp/js/components/MainWindow/Minimize.tsx b/packages/webamp/js/components/MainWindow/Minimize.tsx
index 27a57380..7fa8b0ec 100644
--- a/packages/webamp/js/components/MainWindow/Minimize.tsx
+++ b/packages/webamp/js/components/MainWindow/Minimize.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 import ClickedDiv from "../ClickedDiv";
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const Minimize = React.memo(() => {
+const Minimize = memo(() => {
   const minimize = useActionCreator(Actions.minimize);
   return <ClickedDiv id="minimize" title="Minimize" onClick={minimize} />;
 });
diff --git a/packages/webamp/js/components/MainWindow/MonoStereo.tsx b/packages/webamp/js/components/MainWindow/MonoStereo.tsx
index 6bcbebf3..de2a1072 100644
--- a/packages/webamp/js/components/MainWindow/MonoStereo.tsx
+++ b/packages/webamp/js/components/MainWindow/MonoStereo.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
-const MonoStereo = React.memo(() => {
+const MonoStereo = memo(() => {
   const channels = useTypedSelector(Selectors.getChannels);
   return (
     <div className="mono-stereo">
diff --git a/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx b/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx
index 4c6bbd85..e28667e3 100644
--- a/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx
+++ b/packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Selectors from "../../selectors";
@@ -9,7 +9,7 @@ function togglePlaylist() {
   return Actions.toggleWindow("playlist");
 }
 
-const PlaylistToggleButton = React.memo(() => {
+const PlaylistToggleButton = memo(() => {
   const selected = useTypedSelector(Selectors.getWindowOpen)("playlist");
   const handleClick = useActionCreator(togglePlaylist);
   return (
diff --git a/packages/webamp/js/components/MainWindow/Position.tsx b/packages/webamp/js/components/MainWindow/Position.tsx
index 037c0fda..f074b607 100644
--- a/packages/webamp/js/components/MainWindow/Position.tsx
+++ b/packages/webamp/js/components/MainWindow/Position.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo, useCallback } from "react";
 
 import {
   SEEK_TO_PERCENT_COMPLETE,
@@ -22,11 +22,11 @@ function usePosition() {
   return [position, displayedPosition];
 }
 
-const Position = React.memo(() => {
+const Position = memo(() => {
   const [position, displayedPosition] = usePosition();
   const dispatch = useTypedDispatch();
 
-  const seekToPercentComplete = React.useCallback(
+  const seekToPercentComplete = useCallback(
     (e) => {
       dispatch({
         type: SEEK_TO_PERCENT_COMPLETE,
@@ -37,7 +37,7 @@ const Position = React.memo(() => {
     [dispatch]
   );
 
-  const setPosition = React.useCallback(
+  const setPosition = useCallback(
     (e) => {
       dispatch({ type: SET_FOCUS, input: "position" });
       dispatch({
diff --git a/packages/webamp/js/components/MainWindow/Repeat.tsx b/packages/webamp/js/components/MainWindow/Repeat.tsx
index 4bbb62c6..5fd8dcda 100644
--- a/packages/webamp/js/components/MainWindow/Repeat.tsx
+++ b/packages/webamp/js/components/MainWindow/Repeat.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
@@ -6,7 +6,7 @@ import ContextMenuWraper from "../ContextMenuWrapper";
 import { Node } from "../ContextMenu";
 import { useTypedSelector, useActionCreator } from "../../hooks";
 
-const Repeat = React.memo(() => {
+const Repeat = memo(() => {
   const repeat = useTypedSelector(Selectors.getRepeat);
   const handleClick = useActionCreator(Actions.toggleRepeat);
   return (
diff --git a/packages/webamp/js/components/MainWindow/Shade.tsx b/packages/webamp/js/components/MainWindow/Shade.tsx
index acd250ed..40765482 100644
--- a/packages/webamp/js/components/MainWindow/Shade.tsx
+++ b/packages/webamp/js/components/MainWindow/Shade.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import ClickedDiv from "../ClickedDiv";
 
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const Shade = React.memo(() => {
+const Shade = memo(() => {
   const handleClick = useActionCreator(Actions.toggleMainWindowShadeMode);
   return (
     <ClickedDiv
diff --git a/packages/webamp/js/components/MainWindow/Shuffle.tsx b/packages/webamp/js/components/MainWindow/Shuffle.tsx
index aa3e2010..94059a36 100644
--- a/packages/webamp/js/components/MainWindow/Shuffle.tsx
+++ b/packages/webamp/js/components/MainWindow/Shuffle.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
@@ -6,7 +6,7 @@ import ContextMenuWraper from "../ContextMenuWrapper";
 import { Node } from "../ContextMenu";
 import { useTypedSelector, useActionCreator } from "../../hooks";
 
-const Shuffle = React.memo(() => {
+const Shuffle = memo(() => {
   const shuffle = useTypedSelector(Selectors.getShuffle);
   const handleClick = useActionCreator(Actions.toggleShuffle);
   return (
diff --git a/packages/webamp/js/components/MainWindow/Time.tsx b/packages/webamp/js/components/MainWindow/Time.tsx
index 8030199e..f6068ca5 100644
--- a/packages/webamp/js/components/MainWindow/Time.tsx
+++ b/packages/webamp/js/components/MainWindow/Time.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import * as Utils from "../../utils";
 
 import * as Actions from "../../actionCreators";
@@ -6,7 +6,7 @@ import * as Selectors from "../../selectors";
 import { TIME_MODE } from "../../constants";
 import { useActionCreator, useTypedSelector } from "../../hooks";
 
-const Time = React.memo(() => {
+const Time = memo(() => {
   const toggleTimeMode = useActionCreator(Actions.toggleTimeMode);
   const timeElapsed = useTypedSelector(Selectors.getTimeElapsed);
   const duration = useTypedSelector(Selectors.getDuration) || 0;
diff --git a/packages/webamp/js/components/MainWindow/index.tsx b/packages/webamp/js/components/MainWindow/index.tsx
index 0a266de7..c93bf884 100644
--- a/packages/webamp/js/components/MainWindow/index.tsx
+++ b/packages/webamp/js/components/MainWindow/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { WINDOWS, MEDIA_STATUS, LOAD_STYLE } from "../../constants";
 import * as Actions from "../../actionCreators";
diff --git a/packages/webamp/js/components/MilkdropWindow/Background.tsx b/packages/webamp/js/components/MilkdropWindow/Background.tsx
index 93316945..cc8055e1 100644
--- a/packages/webamp/js/components/MilkdropWindow/Background.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/Background.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 interface Props {
   innerRef?: (node: HTMLDivElement) => void;
diff --git a/packages/webamp/js/components/MilkdropWindow/Desktop.tsx b/packages/webamp/js/components/MilkdropWindow/Desktop.tsx
index dfca0a48..c0d6a4ec 100644
--- a/packages/webamp/js/components/MilkdropWindow/Desktop.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/Desktop.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom";
 
 interface Props {
diff --git a/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx b/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx
index f672460d..d3807f5b 100644
--- a/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { Hr, Node } from "../ContextMenu";
 import { WINDOWS } from "../../constants";
 import * as Selectors from "../../selectors";
diff --git a/packages/webamp/js/components/MilkdropWindow/PresetOverlay.tsx b/packages/webamp/js/components/MilkdropWindow/PresetOverlay.tsx
index 36f70a68..f32b0560 100644
--- a/packages/webamp/js/components/MilkdropWindow/PresetOverlay.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/PresetOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { promptForFileReferences } from "../../fileUtils";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";
diff --git a/packages/webamp/js/components/MilkdropWindow/Visualizer.tsx b/packages/webamp/js/components/MilkdropWindow/Visualizer.tsx
index 10123a9b..99ca4154 100644
--- a/packages/webamp/js/components/MilkdropWindow/Visualizer.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/Visualizer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { VISUALIZERS } from "../../constants";
 import * as Selectors from "../../selectors";
 import { TransitionType } from "../../types";
diff --git a/packages/webamp/js/components/MilkdropWindow/index.tsx b/packages/webamp/js/components/MilkdropWindow/index.tsx
index 0d4c875b..e3682b42 100644
--- a/packages/webamp/js/components/MilkdropWindow/index.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import Fullscreen from "../Fullscreen";
 import {
   useWindowSize,
diff --git a/packages/webamp/js/components/MiniTime.tsx b/packages/webamp/js/components/MiniTime.tsx
index dc299eaf..cf67f5a5 100644
--- a/packages/webamp/js/components/MiniTime.tsx
+++ b/packages/webamp/js/components/MiniTime.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 import classnames from "classnames";
 import { getTimeObj } from "../utils";
 import { TIME_MODE, MEDIA_STATUS } from "../constants";
@@ -14,7 +14,7 @@ import { useTypedSelector, useActionCreator } from "../hooks";
 // Possible to do that in pure CSS with the background being dynamically generated.
 // All "space" characters is also how Winamp renders no content.
 const Background = () => (
-  <React.Fragment>
+  <Fragment>
     {[1, 7, 12, 20, 25].map((left, i) => (
       <Character
         style={{ left }}
@@ -23,7 +23,7 @@ const Background = () => (
         children=" "
       />
     ))}
-  </React.Fragment>
+  </Fragment>
 );
 
 const MiniTime = () => {
diff --git a/packages/webamp/js/components/OptionsContextMenu.tsx b/packages/webamp/js/components/OptionsContextMenu.tsx
index bfc1f8bd..b836be52 100644
--- a/packages/webamp/js/components/OptionsContextMenu.tsx
+++ b/packages/webamp/js/components/OptionsContextMenu.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Hr, Node } from "./ContextMenu";
 import SkinsContextMenu from "./SkinsContextMenu";
 import * as Actions from "../actionCreators";
diff --git a/packages/webamp/js/components/PlaybackContextMenu.tsx b/packages/webamp/js/components/PlaybackContextMenu.tsx
index 3b9d2b24..25402636 100644
--- a/packages/webamp/js/components/PlaybackContextMenu.tsx
+++ b/packages/webamp/js/components/PlaybackContextMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 import * as Actions from "../actionCreators";
 import { Hr, Node } from "./ContextMenu";
 import { useActionCreator } from "../hooks";
@@ -13,7 +13,7 @@ const PlaybackContextMenu = () => {
   const seekBackward = useActionCreator(Actions.seekBackward);
   const nextN = useActionCreator(Actions.nextN);
   return (
-    <React.Fragment>
+    <Fragment>
       <Node label="Previous" hotkey="Z" onClick={previous} />
       <Node label="Play" hotkey="X" onClick={play} />
       <Node label="Pause" hotkey="C" onClick={pause} />
@@ -44,7 +44,7 @@ const PlaybackContextMenu = () => {
     <Node label="Jump to time" hotkey="Ctrl+J" />
     <Node label="Jump to file" hotkey="J" />
     */}
-    </React.Fragment>
+    </Fragment>
   );
 };
 
diff --git a/packages/webamp/js/components/PlaylistWindow/AddMenu.tsx b/packages/webamp/js/components/PlaylistWindow/AddMenu.tsx
index c61c57f7..44285e4a 100644
--- a/packages/webamp/js/components/PlaylistWindow/AddMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/AddMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
diff --git a/packages/webamp/js/components/PlaylistWindow/ListMenu.tsx b/packages/webamp/js/components/PlaylistWindow/ListMenu.tsx
index f8716425..2a881f62 100644
--- a/packages/webamp/js/components/PlaylistWindow/ListMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/ListMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
 import { useActionCreator } from "../../hooks";
diff --git a/packages/webamp/js/components/PlaylistWindow/MiscMenu.tsx b/packages/webamp/js/components/PlaylistWindow/MiscMenu.tsx
index 99255bc4..0436a011 100644
--- a/packages/webamp/js/components/PlaylistWindow/MiscMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/MiscMenu.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import PlaylistMenu from "./PlaylistMenu";
 import SortContextMenu from "./SortContextMenu";
 import MiscOptionsContextMenu from "./MiscOptionsContextMenu";
diff --git a/packages/webamp/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx b/packages/webamp/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx
index 28021687..0a650c3e 100644
--- a/packages/webamp/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Node } from "../ContextMenu";
 import ContextMenuTarget from "../ContextMenuTarget";
 import * as Actions from "../../actionCreators";
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistActionArea.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistActionArea.tsx
index c8612b3a..a0f18d67 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistActionArea.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistActionArea.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 
 import * as Actions from "../../actionCreators";
 
@@ -14,7 +14,7 @@ const PlaylistWindow = () => {
   const next = useActionCreator(Actions.next);
   const previous = useActionCreator(Actions.previous);
   return (
-    <React.Fragment>
+    <Fragment>
       <RunningTimeDisplay />
       <div className="playlist-action-buttons">
         <div className="playlist-previous-button" onClick={previous} />
@@ -25,7 +25,7 @@ const PlaylistWindow = () => {
         <div className="playlist-eject-button" onClick={openMediaFileDialog} />
       </div>
       <MiniTime />
-    </React.Fragment>
+    </Fragment>
   );
 };
 export default PlaylistWindow;
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistMenu.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistMenu.tsx
index a4faf7f8..03081209 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactNode, useCallback } from "react";
+import { Children, memo, useState, ReactNode, useCallback } from "react";
 import classnames from "classnames";
 import { useOnClickAway } from "../../hooks";
 
@@ -43,7 +43,7 @@ function PlaylistMenu(props: Props) {
       <div className="bar" />
       {selected && (
         <ul>
-          {React.Children.map(props.children, (child, i) => (
+          {Children.map(props.children, (child, i) => (
             <PlaylistMenuEnry key={i}>{child}</PlaylistMenuEnry>
           ))}
         </ul>
@@ -51,4 +51,4 @@ function PlaylistMenu(props: Props) {
     </div>
   );
 }
-export default React.memo(PlaylistMenu);
+export default memo(PlaylistMenu);
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistMenuEntry.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistMenuEntry.tsx
index 397cbbe9..a15a1618 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistMenuEntry.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistMenuEntry.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { memo, ReactNode } from "react";
 import classnames from "classnames";
 import { useIsHovered } from "../../hooks";
 
@@ -16,4 +16,4 @@ function PlaylistMenuEntry({ children }: Props) {
   );
 }
 
-export default React.memo(PlaylistMenuEntry);
+export default memo(PlaylistMenuEntry);
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistResizeTarget.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistResizeTarget.tsx
index 7f65f7e3..08b6d631 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistResizeTarget.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistResizeTarget.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ResizeTarget from "../ResizeTarget";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.test.js b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.test.js
index 6c10dee2..a55e5c66 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.test.js
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.test.js
@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
 import Emitter from "../../emitter";
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
index 361bdee1..65fc2afa 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import classnames from "classnames";
 import { getTimeStr } from "../../utils";
 import * as Selectors from "../../selectors";
diff --git a/packages/webamp/js/components/PlaylistWindow/RemoveMenu.tsx b/packages/webamp/js/components/PlaylistWindow/RemoveMenu.tsx
index c0acd0dd..ce4fe35c 100644
--- a/packages/webamp/js/components/PlaylistWindow/RemoveMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/RemoveMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
 import { useActionCreator } from "../../hooks";
diff --git a/packages/webamp/js/components/PlaylistWindow/RunningTimeDisplay.tsx b/packages/webamp/js/components/PlaylistWindow/RunningTimeDisplay.tsx
index 1c69e41d..f8d9f414 100644
--- a/packages/webamp/js/components/PlaylistWindow/RunningTimeDisplay.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/RunningTimeDisplay.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 import CharacterString from "../CharacterString";
 import * as Actions from "../../selectors";
diff --git a/packages/webamp/js/components/PlaylistWindow/ScrollBar.tsx b/packages/webamp/js/components/PlaylistWindow/ScrollBar.tsx
index 7c0dc321..7869bd19 100644
--- a/packages/webamp/js/components/PlaylistWindow/ScrollBar.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/ScrollBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 
 // Here we import the rc-slider class just to get it's type.
 // We expect the Typescript compiler to not actually include this in the bundle.
@@ -39,4 +39,4 @@ const ScrollBar = () => {
   );
 };
 
-export default React.memo(ScrollBar);
+export default memo(ScrollBar);
diff --git a/packages/webamp/js/components/PlaylistWindow/SelectionMenu.tsx b/packages/webamp/js/components/PlaylistWindow/SelectionMenu.tsx
index 916f40a0..1e601d7b 100644
--- a/packages/webamp/js/components/PlaylistWindow/SelectionMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/SelectionMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import PlaylistMenu from "./PlaylistMenu";
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
diff --git a/packages/webamp/js/components/PlaylistWindow/SortContextMenu.tsx b/packages/webamp/js/components/PlaylistWindow/SortContextMenu.tsx
index ffd1b26e..ca899fc5 100644
--- a/packages/webamp/js/components/PlaylistWindow/SortContextMenu.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/SortContextMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../../actionCreators";
 
 import { Hr, Node } from "../ContextMenu";
diff --git a/packages/webamp/js/components/PlaylistWindow/TrackCell.tsx b/packages/webamp/js/components/PlaylistWindow/TrackCell.tsx
index 408a0b07..d0e0175a 100644
--- a/packages/webamp/js/components/PlaylistWindow/TrackCell.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/TrackCell.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, ReactNode } from "react";
+import { useCallback, ReactNode } from "react";
 import classnames from "classnames";
 import {
   CLICKED_TRACK,
diff --git a/packages/webamp/js/components/PlaylistWindow/TrackList.tsx b/packages/webamp/js/components/PlaylistWindow/TrackList.tsx
index f6249580..98253c89 100644
--- a/packages/webamp/js/components/PlaylistWindow/TrackList.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/TrackList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
 import { getTimeStr } from "../../utils";
 import * as Selectors from "../../selectors";
diff --git a/packages/webamp/js/components/PlaylistWindow/TrackTitle.tsx b/packages/webamp/js/components/PlaylistWindow/TrackTitle.tsx
index 2bc69cbc..6b82e087 100644
--- a/packages/webamp/js/components/PlaylistWindow/TrackTitle.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/TrackTitle.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
diff --git a/packages/webamp/js/components/PlaylistWindow/index.test.js b/packages/webamp/js/components/PlaylistWindow/index.test.js
index 61b12c37..fae16b15 100644
--- a/packages/webamp/js/components/PlaylistWindow/index.test.js
+++ b/packages/webamp/js/components/PlaylistWindow/index.test.js
@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
 import getStore from "../../store";
diff --git a/packages/webamp/js/components/PlaylistWindow/index.tsx b/packages/webamp/js/components/PlaylistWindow/index.tsx
index e78a426a..d5af7173 100644
--- a/packages/webamp/js/components/PlaylistWindow/index.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import classnames from "classnames";
 
 import { WINDOWS, TRACK_HEIGHT, LOAD_STYLE } from "../../constants";
diff --git a/packages/webamp/js/components/ResizeTarget.tsx b/packages/webamp/js/components/ResizeTarget.tsx
index d01af6ed..2e115b5e 100644
--- a/packages/webamp/js/components/ResizeTarget.tsx
+++ b/packages/webamp/js/components/ResizeTarget.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
 import {
   WINDOW_RESIZE_SEGMENT_WIDTH,
   WINDOW_RESIZE_SEGMENT_HEIGHT,
@@ -67,4 +67,4 @@ function ResizeTarget(props: Props) {
 
   return <div onMouseDown={handleMouseDown} {...passThroughProps} />;
 }
-export default React.memo(ResizeTarget);
+export default memo(ResizeTarget);
diff --git a/packages/webamp/js/components/Skin.tsx b/packages/webamp/js/components/Skin.tsx
index bc278cd9..0b2a1b54 100644
--- a/packages/webamp/js/components/Skin.tsx
+++ b/packages/webamp/js/components/Skin.tsx
@@ -1,6 +1,4 @@
 // Dynamically set the css background images for all the sprites
-import React from "react";
-
 import { LETTERS } from "../constants";
 import { imageSelectors, cursorSelectors } from "../skinSelectors";
 import { useTypedSelector } from "../hooks";
diff --git a/packages/webamp/js/components/SkinsContextMenu.tsx b/packages/webamp/js/components/SkinsContextMenu.tsx
index 55e09e33..b86c2f41 100644
--- a/packages/webamp/js/components/SkinsContextMenu.tsx
+++ b/packages/webamp/js/components/SkinsContextMenu.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
 import { Hr, Node, Parent } from "./ContextMenu";
diff --git a/packages/webamp/js/components/Visualizer.tsx b/packages/webamp/js/components/Visualizer.tsx
index 311e4386..eae6e78b 100644
--- a/packages/webamp/js/components/Visualizer.tsx
+++ b/packages/webamp/js/components/Visualizer.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState, useLayoutEffect } from "react";
+import { useMemo, useCallback, useState, useLayoutEffect } from "react";
 
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
diff --git a/packages/webamp/js/components/Volume.tsx b/packages/webamp/js/components/Volume.tsx
index c7ad122d..87c36323 100644
--- a/packages/webamp/js/components/Volume.tsx
+++ b/packages/webamp/js/components/Volume.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
 import { useTypedSelector, useActionCreator } from "../hooks";
diff --git a/packages/webamp/js/components/WindowManager.tsx b/packages/webamp/js/components/WindowManager.tsx
index 43918802..44adfde1 100644
--- a/packages/webamp/js/components/WindowManager.tsx
+++ b/packages/webamp/js/components/WindowManager.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 
 import * as SnapUtils from "../snapUtils";
 import * as Selectors from "../selectors";
diff --git a/packages/webamp/js/playlistHtml.tsx b/packages/webamp/js/playlistHtml.tsx
index 3bfcf53e..d4eb4bc2 100644
--- a/packages/webamp/js/playlistHtml.tsx
+++ b/packages/webamp/js/playlistHtml.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "react-dom";
 
 interface Props {
diff --git a/packages/webamp/js/webampLazy.tsx b/packages/webamp/js/webampLazy.tsx
index 7927a1dc..ca045243 100644
--- a/packages/webamp/js/webampLazy.tsx
+++ b/packages/webamp/js/webampLazy.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 
diff --git a/packages/webamp/package.json b/packages/webamp/package.json
index 3f1eb379..df03551f 100644
--- a/packages/webamp/package.json
+++ b/packages/webamp/package.json
@@ -116,11 +116,11 @@
     "prettier": "^2.0.4",
     "puppeteer": "^1.15.0",
     "rc-slider": "^8.7.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.1.0",
-    "react-test-renderer": "^16.8.1",
-    "redux": "^4.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-test-renderer": "^17.0.1",
+    "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.3.0",
     "reselect": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index ed40588a..0b7b3edf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1060,6 +1060,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.10.3", "@babel/template@^7.3.3":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8"
@@ -5983,7 +5990,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   dependencies:
@@ -10158,14 +10165,14 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+react-dom@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.1"
 
 react-dropzone@^10.1.7:
   version "10.2.2"
@@ -10175,10 +10182,15 @@ react-dropzone@^10.1.7:
     file-selector "^0.1.12"
     prop-types "^15.7.2"
 
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
 
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -10193,6 +10205,25 @@ react-redux@^7.1.0:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-redux@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+  integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
 react-test-renderer@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
@@ -10202,13 +10233,23 @@ react-test-renderer@^16.8.1:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
-react@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+react-test-renderer@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
+  integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.1"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.1"
+
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -10337,7 +10378,7 @@ redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 
-redux@^4.0.0, redux@^4.0.1:
+redux@^4.0.0, redux@^4.0.1, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   dependencies:
@@ -10746,6 +10787,14 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"