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

CodePudding user response：

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.