Agregué un evento onChange al archivo Editor.js, establece el valor de la variable de value usando setValue que hace que se vuelva a procesar el componente de la aplicación en cada cambio. Se necesitan valores tanto de value como de query en Editor.js y Sidebar.js. ¿Hay alguna manera mejor de hacer esto para mejorar el rendimiento?

Código de aplicación.js:

 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;