opening devtool causes webpage to reload (Google Chrome) - reactjs

Question

I'm having a issue and im not sure the problem is chrome, react or macOs
When i open devtools my component rerender. I have simple code about redux-persist
Summary: Im trying to open second browser when Page1 renders if user closes Page2, a button inside Page1 will be active to open Page2 on second tab.
When user closes/refreshs Page1 tab Page2 tab will also close and clear the persist:root
Im using:
Chrome:Version 107.0.5304.110
React:18.2.0
MacOS Monterey:12.3.1
code examples:
App.js
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Page1 from "./Page1";
import Page2 from "./Page2";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Page1 />}></Route>
<Route path="test" element={<Page2 />} />
</Routes>
</BrowserRouter>
);
};
export default App;
Page1.js
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addItem, clearAll, createList, removeItem } from "./testReducer";
const Page1 = () => {
const [isSecondScreenButtonDisable, setIsSecondScreenButtonDisable] =
useState(false);
const dispatch = useDispatch();
const reducerList = useSelector((state) => state.counter);
const array = [1];
window.addEventListener("beforeunload", () => {
localStorage.setItem("isSecondSreenOpen", "false");
localStorage.removeItem("persist:root");
});
window.addEventListener("storage", () => {
const isOpen = localStorage.getItem("isSecondSreenOpen");
if (isOpen === "false") {
setIsSecondScreenButtonDisable(false);
} else {
setIsSecondScreenButtonDisable(true);
}
});
useEffect(() => {
localStorage.setItem("isSecondSreenOpen", true);
window.dispatchEvent(new Event("storage"));
dispatch(createList(array));
}, []);
useEffect(() => {
if (localStorage.getItem("isSecondSreenOpen") === "true") {
window.open("test", "_blank");
}
}, []);
return (
<div className="App">
<button
disabled={isSecondScreenButtonDisable}
onClick={() => {
window.open("test", "_blank");
}}
>
2. sayfa
</button>
<header className="App-header">
<button onClick={() => dispatch(clearAll())}> Hepsini Sil</button>
<button onClick={() => dispatch(addItem(100))}> Ekle</button>
<button onClick={() => dispatch(removeItem())}> Sil</button>
{reducerList.map((item, index) => {
return (
<div key={item + index}>
{index}-{item}
</div>
);
})}
</header>
</div>
);
};
export default Page1;
Page2
import { useEffect } from "react";
import { useSelector } from "react-redux";
const Page2 = () => {
const reducerList = useSelector((state) => state.counter);
const onCloseEvent = () => {
localStorage.setItem("isSecondSreenOpen", false);
window.close();
};
window.addEventListener("beforeunload", () => {
localStorage.setItem("isSecondSreenOpen", false);
});
useEffect(() => {
localStorage.setItem("isSecondSreenOpen", true);
window.addEventListener("storage", () => {
const isOpen = localStorage.getItem("isSecondSreenOpen");
if (isOpen === "false") {
onCloseEvent();
}
});
}, []);
return (
<div className="App">
<header className="App-header">
{reducerList.map((item, index) => {
return (
<div key={item}>
{index}-{item}
</div>
);
})}
</header>
</div>
);
};
export default Page2;
store.js
import { combineReducers, configureStore } from "#reduxjs/toolkit";
import {
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import { createStateSyncMiddleware } from "redux-state-sync";
// import secondReducer from "./secondReducer";
import testReducer from "./testReducer";
const persistConfig = {
key: "root",
version: 1,
storage,
// blacklist: ['secondReducer']
};
const rootReducer = combineReducers({
counter: testReducer,
// secondReducer: secondReducer,
});
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}).concat(
createStateSyncMiddleware({
blacklist: [PERSIST, REHYDRATE],
})
),
});
export const persistor = persistStore(store);
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { persistor, store } from "./store";
import { PersistGate } from "redux-persist/lib/integration/react";
import { initMessageListener } from "redux-state-sync";
const root = ReactDOM.createRoot(document.getElementById("root"));
initMessageListener(store);
root.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
);
reportWebVitals();
Edit: Not only my component rerender it starts from index.js

Answer 1

I found the answer it is not about react. I'm using extension called "Awesome Color Picker" when i disable this extension the problem solved.