Modals flashing on unmount even with toggle set to false

[joshuaiz]

Hello,

Really love the simplicity of this component however I'm having an issue where the Modali modals flash on page refresh/component unmounting.

I have the modal toggles initialized to false and only update their state to true for certain actions however the modals are displaying for a split second on the pages/components just before a route change or transition to another page/component.

Here is the initialization of the modal with hooks:

const [upgradeAccountModal, toggleUpgradeAccountModal] = useModali(false)

And here is an example modal:

{toggleUpgradeAccountModal && (
    <Modali.Modal
        {...upgradeAccountModal}
        animated={true}
        centered={true}
    >
        <div className="error-message">
            <div className="error-header">
                <Logo />
                <h3>Please upgrade your account.</h3>
            </div>
            <p>
                Exporting to SCSS code is available to Hexy Pro
                Unlimited and Hexy Pro Lifetime accounts.
                <Link to="/pro">Upgrade now</Link> to export SCSS.
            </p>
            <button className="button">
                <Link to="/pro">Upgrade</Link>
            </button>
        </div>
    </Modali.Modal>
)}

This obviously shouldn't show unless toggleUpgradeAccountModal is set to true but for whatever reason, this must be getting toggled on the parent component unmount.

The only place this modal is set to true is in a handler deriving from an onClick action:

<div className="export-code">
    <Tippy
        // options
        content="Export SCSS code"
        placement="top"
        trigger="mouseenter"
        arrow={true}
    >
        <span
            className={`export-css ${
                accountLevel &&
                accountLevel === 'high'
                    ? 'enabled'
                    : 'disabled'
            }`}
            onClick={() =>
                exportCode(
                    palette.palette,
                    palette.name
                )
            }
        >
            <Code />
        </span>
    </Tippy>
</div>

And then the exportCode handler:

const exportCode = (palette, paletteName) => {
    if (
        currentUser &&
        smallAccounts.indexOf(currentUser.accountType) === 1
    ) {
        toggleUpgradeAccountModal(true)
        return
    }
   // rest of function code
}

Thus I can't seem to find any other way the modal toggle is being set to true, yet the modal is still flashing on unmount.

Any ideas on why this is happening and how to fix?