I have a component called Popout.js which receives parameters from my App.js to open a popout.
Each popout is then pushed to an array, this array is later iterated through and each popout is closed if the parent window is closed.
This array is saved and updated inside a Redux state.
The functionality for these components work fine, unless you try opening too many popouts too quickly. I have the popoutsArray logged each time the array is updated. If popouts are opened too quickly, some items in the array which previously logged as Windows are now logged as Proxies, and subsequently my program crashes.
What is causing this and how can I fix it?
Redux:
export const popoutSlice = createSlice({
name: "app",
initialState: {
compose: false,
users: false,
tags: false,
rooms: false,
documents: false,
popoutLeftOpened: JSON.parse(
localStorage.getItem("popoutLeftOpened") ?? "{}"
),
dimensions: JSON.parse(localStorage.getItem("dimensions") ?? "{}"),
popoutsArray: [],
},
setPopoutsArray: (state, action) => {
const newWin = action.payload;
console.log(newWin);
state.popoutsArray = [...state.popoutsArray, newWin];
console.log(state.popoutsArray);
},
Popout.js:
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import {
setPopoutLeftOpened,
setPopoutsArray,
} from "../../features/popoutSlice";
function Popout({ popout, setting, show }) {
const dispatch = useDispatch();
const [popoutWindow, setPopoutWindow] = useState(null);
function openWindow() {
dispatch(
setPopoutLeftOpened({ name: setting, popoutLeftOpened: true })
);
const settings = JSON.parse(
localStorage.getItem(setting + "-dimensions")
);
let features = "width=800, height=500, left=300, top=200";
const dim = settings;
if (dim != null) {
features =
"width=" +
dim.width +
", height=" +
dim.height +
", left=" +
dim.left +
", top=" +
dim.top;
}
var url = window.location.protocol + "//" + window.location.hostname;
if (url.includes("localhost")) {
url += ":" + window.location.port;
url += popout;
}
const newWindow = window.open(url, "_blank", features);
dispatch(setPopoutsArray(newWindow));
var timer = setInterval(function () {
if (newWindow.closed) {
clearInterval(timer);
dispatch(
setPopoutLeftOpened({
name: setting,
popoutLeftOpened: false,
})
);
}
}, 1000);
return newWindow;
}
useEffect(() => {
if (show) {
if (popoutWindow === null) {
setPopoutWindow(openWindow());
}
} else {
if (popoutWindow !== null) {
console.log("closed the popout? 1");
dispatch(
setPopoutLeftOpened({
name: setting,
popoutLeftOpened: false,
})
);
popoutWindow.close();
setPopoutWindow(null);
}
}
}, [show, popoutWindow]);
useEffect(() => {
return () => {
setPopoutWindow((popoutWindow) => {
if (popoutWindow !== null) {
dispatch(
setPopoutLeftOpened({
name: setting,
popoutLeftOpened: false,
})
);
popoutWindow.close();
}
return null;
});
};
}, []);
return null;
}
export default Popout;
Console when popouts opened at a normal speed:
Console showing popoutsArray
Console when popouts are spammed/opened too quickly (and program crashes):
Console when popouts are spammed and return as a Proxy
If you need more information please let me know, or if this is a repeated question let me know and the question will be modified or deleted.
