I am going to store the current error in redux store, in order to show an Error Dialog.

For the error dialog, it will store in App.js like below:

App.js

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

import { useSelector } from "react-redux";

import ErrorDialog from "./ErrorDialog";
import ComponentA from "./ComponentA";

export default function App() {
  const error = useSelector((state) => state.error);
  return (
    <div className="App">
      <ComponentA />
      {Object.keys(error).length !== 0 && (
        <ErrorDialog title={error.title} message={error.message} />
      )}
    </div>
  );
}

Every Time I hit an error in any page, dispatch will be used to set the error(such as {title:"myError", message: "134"}) in redux store. The error dialog in App.js will be shown like below:

When I close the dialog, I will use dispatch to set the error to {} so it can be closed.

I am wondering will this lead to performance issue if there are more components? Because the <ErrorDialog/> in App.js need to be re-rendered many time.

Or will there be any better way to handle error?