I would like to make a modal window where the user can choose a team of 3 characters.

So far I’ve been using a state in the parent component like const [showModal, toggleModal] = useState(false);
But changing this state causes the whole parent to be rendered again, and that doesn’t always seem optimal, especially when my modal is placed close to the root

However, I’d still like to know the best practices for this nowadays. And I saw a lot of ways to achieve this kind of modal.
Some using global function, others using Context, Memo or even Portals ?
I’m also seeing a lot of people talking about native dialog element.

By saying global function, I mean this :`

const confirmAction = { current: (p) => Promise.resolve(true) };
export function confirm(props) { return confirmAction.current(props); }

export function ConfirmGlobal() {
  const [open, setOpen] = useState(false);
  const [props, setProps] = useState({});

  const resolveRef = useRef((v) => {});
  confirmAction.current = (props) =>
    new Promise((resolve) => {
      setProps(props);
      setOpen(true);
      resolveRef.current = resolve;
    });

  const onConfirm = () => {
    resolveRef.current(true);
    setOpen(false);
  };

  const onCancel = () => {
    resolveRef.current(false);
    setOpen(false);
  };

  return (
    <ConfirmDialog
      onConfirm={onConfirm}
      onCancel={onCancel}
      open={open}
      {...props}
    />
  );
}