I added an onChange event to the Editor.js file, it sets the value of the value variable using setValue that causes rerender of the App component on every change. Values of both value and query are needed in Editor.js and Sidebar.js. Is there any better way to do this to improve the performance?

App.js Code:

import React, { Suspense, useState } from "react";
import "./assets/output.css";
import Footer from "./components/layouts/Footer";
import Navbar from "./components/layouts/Navbar";
import Sidebar from "./components/layouts/Sidebar";
import TableSection from "./components/table/TableSection";

const Editor = React.lazy(() => import("./components/editor/Editor"));

const App = () => {
  const [query, setQuery] = useState("");
  const [value, setValue] = useState("select * from customers");

  return (
    <div className="grid grid-cols-layout-desktop grid-rows-layout-desktop bg-gray-600 h-screen">
      <Navbar />
      <Sidebar setQuery={setQuery} setValue={setValue} />
      <Suspense fallback={<div>Loading..</div>}>
        <Editor setQuery={setQuery} value={value} setValue={setValue} />
      </Suspense>
      {query ? <TableSection query={query} /> : null}
      <Footer />
    </div>
  );
};

export default App;