What's the difference with a simpler useDialogState hook

[royriojas]

Hi @renchap

I'm really curious to understand why the useModal hook needs to use react context.

Basically the way I was handling modals was using this simpler hook.

export const useDialogState = (open = false) => {
  const [isOpen, setOpen] = useState(open);

  return [
    isOpen,
    useCallback(() => setOpen(true), []),
    useCallback(() => setOpen(false), [])
  ];
};

I've forked your demo and replaced with this simpler hook and the app seems to be working fine

https://codesandbox.io/s/usedialogstate-89k27?file=/src/useDialogState.js:48-258

So I was really curious why it was needed to use the context. Are there any advantages that I'm missing? or disadvantages on the simpler approach that I fail to see?

I'm kind of new to react hooks (I prefer to use Mobx for state management) and we used to have a small model to manage dialog states so it was kind of natural to me to just re-write it as a simpler hook but then I found your model and was surprised about the usage of react context.

[picosam]

@mpontus I'm very interested in your answer to this as well! Thank you.

[andresmoschini]

+1

[azzztec]

When component with

Hi @renchap

I'm really curious to understand why the useModal hook needs to use react context.

Basically the way I was handling modals was using this simpler hook.

export const useDialogState = (open = false) => {
  const [isOpen, setOpen] = useState(open);

  return [
    isOpen,
    useCallback(() => setOpen(true), []),
    useCallback(() => setOpen(false), [])
  ];
};

I've forked your demo and replaced with this simpler hook and the app seems to be working fine

https://codesandbox.io/s/usedialogstate-89k27?file=/src/useDialogState.js:48-258

So I was really curious why it was needed to use the context. Are there any advantages that I'm missing? or disadvantages on the simpler approach that I fail to see?

I'm kind of new to react hooks (I prefer to use Mobx for state management) and we used to have a small model to manage dialog states so it was kind of natural to me to just re-write it as a simpler hook but then I found your model and was surprised about the usage of react context.

When your parent component is unmounted all your models will be unmounted too, but with context thay still be alive