16 - re-render - react

[jsartisan]

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 (
    <>
      <ButtonWithDialog />
      <VerySlowComponent />
      <BunchOfStuff />
      <OtherStuffAlsoComplicated />
    </>
  );
}

function ButtonWithDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open dialog</Button>
      {isOpen ? <ModalDialog onClose={() => setIsOpen(false)} /> : null}
    </>
  );
}