How do you optimize performance in a React application?

import { lazy, Suspense, useState } from "react";

// each lazy import becomes its own chunk, loaded on demand
const Settings = lazy(() => import("./Settings.js"));

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <button onClick={() => setOpen(true)}>Open settings</button>
      {open && (
        <Suspense fallback={<p>Loading…</p>}>
          <Settings />              {/* code for Settings loads only now */}
        </Suspense>
      )}
    </div>
  );
}