See https://svelte.dev/repl/89b164da451a45a48ad12ca8f113b13a?version=4.2.15. This a condensed example of what’s going on in my application.

• There are 3 components: App, which renders Layout, which renders Navigation.
• There are two stores: url and username.
• App has a reactive statement $: if (!$username && $url !== '/login') { url.set('/login') } (e.g. to redirect back to the login page if not logged in).
• Navigation is conditionally rendered only if the URL is not /login.
• Navigation throws an error if username is falsey.
• Pressing the logout button does username.set(null).

stores.js:

import { writable } from 'svelte/store';

export const username = writable();
export const url = writable('/login');

App.svelte:

<script>
    import { url, username } from './stores';
    import Layout from './Layout.svelte';

    $: {
        console.log('App update', $url, $username);
        if (!$username && $url !== '/login') {
            console.info('Redirect to login');
            url.set('/login');
        }
    }
</script>
{console.log('App render', $url, $username), ''}
<Layout />

Layout.svelte:

<script>
    import { url, username } from './stores';
    import Navigation from './Navigation.svelte';

    // Adding $username here seems to fix it?
    $: console.warn('Layout update', $url);
</script>
{(console.warn('Layout render', $url), '')}
{#if $url !== '/login'}
        <Navigation />
        <button on:click={() => {
                username.set(null);
        }}>LOGOUT</button>
{:else}
        <button on:click={() => {
                username.set('admin');
                url.set('/');
        }}>LOGIN</button>
{/if}

Navigation.svelte:

<script>
    import { url, username } from './stores';
    $: try {
        console.log('Nav update', $url, $username);
        if (!$username) {
            throw new Error('Invalid user');
        }
    } catch (err) {
        console.error('EEE', err);
        //throw err;
    }
</script>
{console.log('Nav render', $url), ''}

What should happen:

1. Pressing the logout button sets username to null.
2. App reacts to username changing and sets url to /login.
3. Layout reacts to url changing and unmounts Navigation.
4. Navigation doesn’t throw an error.

What actually happens:

1. Pressing the logout button sets username to null.
2. App reacts to username changing and sets url to /login.
3. Navigation reacts to username changing and throws an error.
4. (if we catch the error and allow svelte to continue) Layout reacts to url changing and unmounts Navigation.

What I would like to understand is why this is happening. Why does svelte update the parent and the child before updating the middle component?

• Passing the url down to Layout as prop doesn’t seem to fix it which I find even more surprising.
• Adding $username to Layout fixes it.

How can you safely use conditional rendering if it’s not guaranteed that a component will be unmounted before it gets updated with potentially invalid state? What am I missing here?