Add useEffect/useState/useMemo to webpack commons

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -22,7 +22,7 @@ import { Link } from "@components/Link";
 import { debounce } from "@utils/debounce";
 import { classes, LazyComponent } from "@utils/misc";
 import { filters, find, findByCodeLazy } from "@webpack";
-import { ContextMenu, FluxDispatcher, Forms, Menu, React } from "@webpack/common";
+import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState } from "@webpack/common";
 
 import { SpotifyStore, Track } from "./SpotifyStore";
 
@@ -142,10 +142,10 @@ function SeekBar() {
         () => [SpotifyStore.mPosition, SpotifyStore.isSettingPosition, SpotifyStore.isPlaying]
     );
 
-    const [position, setPosition] = React.useState(storePosition);
+    const [position, setPosition] = useState(storePosition);
 
     // eslint-disable-next-line consistent-return
-    React.useEffect(() => {
+    useEffect(() => {
         if (isPlaying && !isSettingPosition) {
             setPosition(SpotifyStore.position);
             const interval = setInterval(() => {
@@ -232,7 +232,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
 function Info({ track }: { track: Track; }) {
     const img = track?.album?.image;
 
-    const [coverExpanded, setCoverExpanded] = React.useState(false);
+    const [coverExpanded, setCoverExpanded] = useState(false);
 
     const i = (
         <>
@@ -327,7 +327,7 @@ export function Player() {
     );
 
     const isPlaying = useStateFromStores([SpotifyStore], () => SpotifyStore.isPlaying);
-    const [shouldHide, setShouldHide] = React.useState(false);
+    const [shouldHide, setShouldHide] = useState(false);
 
     // Hide player after 5 minutes of inactivity
     // eslint-disable-next-line consistent-return

src/utils/misc.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Clipboard, React, Toasts } from "@webpack/common";
+import { Clipboard, React, Toasts, useEffect, useState } from "@webpack/common";
 
 /**
  * Makes a lazy function. On first call, the value is computed.
@@ -48,13 +48,13 @@ export function useAwaiter<T>(factory: () => Promise<T>, providedOpts?: AwaiterO
         deps: [],
         onError: null,
     }, providedOpts);
-    const [state, setState] = React.useState({
+    const [state, setState] = useState({
         value: opts.fallbackValue,
         error: null,
         pending: true
     });
 
-    React.useEffect(() => {
+    useEffect(() => {
         let isAlive = true;
         if (!state.pending) setState({ ...state, pending: true });
 
@@ -72,7 +72,7 @@ export function useAwaiter<T>(factory: () => Promise<T>, providedOpts?: AwaiterO
  * Returns a function that can be used to force rerender react components
  */
 export function useForceUpdater() {
-    const [, set] = React.useState(0);
+    const [, set] = useState(0);
     return () => set(s => s + 1);
 }
 

src/utils/react.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { React } from "@webpack/common";
+import { React, useState } from "@webpack/common";
 
 import { checkIntersecting } from "./misc";
 
@@ -30,7 +30,7 @@ export const useIntersection = (intersectOnly = false): [
     isIntersecting: boolean,
 ] => {
     const observerRef = React.useRef<IntersectionObserver | null>(null);
-    const [isIntersecting, setIntersecting] = React.useState(false);
+    const [isIntersecting, setIntersecting] = useState(false);
 
     const refCallback = (element: Element | null) => {
         observerRef.current?.disconnect();

src/webpack/common.tsx

@@ -31,7 +31,12 @@ export const Margins = findByPropsLazy("marginTop20");
 
 export let FluxDispatcher: Other.FluxDispatcher;
 export const Flux = findByPropsLazy("connectStores");
+
 export let React: typeof import("react");
+export let useState: typeof React.useState;
+export let useEffect: typeof React.useEffect;
+export let useMemo: typeof React.useMemo;
+
 export const ReactDOM: typeof import("react-dom") = findByPropsLazy("createPortal", "render");
 
 export const RestAPI = findByPropsLazy("getAPIBaseURL", "get");
@@ -76,7 +81,7 @@ export const TextArea = findByCodeLazy("handleSetRef", "textArea") as React.Comp
 export const Select = LazyComponent(() => findByCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
 export const Slider = LazyComponent(() => findByCode("closestMarkerIndex", "stickToMarkers"));
 
-export let SnowflakeUtils: { fromTimestamp: (timestamp: number) => string, extractTimestamp: (snowflake: string) => number };
+export let SnowflakeUtils: { fromTimestamp: (timestamp: number) => string, extractTimestamp: (snowflake: string) => number; };
 waitFor(["fromTimestamp", "extractTimestamp"], m => SnowflakeUtils = m);
 
 export let Parser: any;
@@ -151,7 +156,10 @@ export const NavigationRouter = mapMangledModuleLazy("Transitioning to external
     goForward: filters.byCode("goForward()"),
 });
 
-waitFor("useState", m => React = m);
+waitFor("useState", m => {
+    React = m;
+    ({ useEffect, useState, useMemo } = React);
+});
 
 waitFor(["dispatch", "subscribe"], m => {
     FluxDispatcher = m;