OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Modal with React JS Best practice

  • Thread starter Thread starter Akihiro
  • Start date Start date
A

Akihiro

Guest
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 :`

Code:
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}
    />
  );
}

<p>I would like to make a modal window where the user can choose a team of 3 characters.</p>
<p>So far I've been using a state in the parent component like <code>const [showModal, toggleModal] = useState(false);</code>
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</p>
<p>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.</p>
<p><em>By saying global function, I mean this :</em>`</p>
<pre class="lang-js prettyprint-override"><code>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}
/>
);
}
</code></pre>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top