16 - re-render - react

[kenmori]

App.jsx

import { useState } from "react";

import { Button } from "./components/button";
import { ModalDialog } from "./components/basic-modal-dialog";
import { VerySlowComponent } from "./components/very-slow-component";
import { BunchOfStuff, OtherStuffAlsoComplicated } from "./components/mocks";

export default function App() {
  return (
    <>
      <Modal />
      <VerySlowComponent />
      <BunchOfStuff />
      <OtherStuffAlsoComplicated />
    </>
  );
}

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open dialog</Button>
      {isOpen ? <ModalDialog onClose={() => setIsOpen(false)} /> : null}
    </>
  );
};