diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 24394c6f..af53f59c 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/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
diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx
index 8b7cea2d..6710523a 100644
--- a/src/utils/misc.tsx
+++ b/src/utils/misc.tsx
@@ -16,7 +16,7 @@
* along with this program. If not, see .
*/
-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(factory: () => Promise, 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(factory: () => Promise, 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);
}
diff --git a/src/utils/react.ts b/src/utils/react.ts
index 8585846c..e5e1f677 100644
--- a/src/utils/react.ts
+++ b/src/utils/react.ts
@@ -16,7 +16,7 @@
* along with this program. If not, see .
*/
-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(null);
- const [isIntersecting, setIntersecting] = React.useState(false);
+ const [isIntersecting, setIntersecting] = useState(false);
const refCallback = (element: Element | null) => {
observerRef.current?.disconnect();
diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx
index 31175f95..f2c42d10 100644
--- a/src/webpack/common.tsx
+++ b/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;