Component doesn't react to changes in Signal

Hi! So I'm not sure why but my component is not reacting when a Signal changes. The signal is defined globally:

export const [authState, setAuthState] = createSignal<AuthState | null>(null);
export const isAuthenticated = () => authState() !== null;

export const [authState, setAuthState] = createSignal<AuthState | null>(null);
export const isAuthenticated = () => authState() !== null;

This is my App.tsx file:

const App: Component = () => {
    createEffect(() => {
        console.warn(authState());
    });

    return (
        <div class={styles.App}>
            <pre>
                isAuthenticated: {JSON.stringify(isAuthenticated())} | authState: {JSON.stringify(authState(), null, 2)}
            </pre>

            <Show when={isAuthenticated()}>
                <p>Authenticated with id {authState()!.id}</p>
            </Show>

            <AuthForm />
        </div>
    );
};

const App: Component = () => {
    createEffect(() => {
        console.warn(authState());
    });

    return (
        <div class={styles.App}>
            <pre>
                isAuthenticated: {JSON.stringify(isAuthenticated())} | authState: {JSON.stringify(authState(), null, 2)}
            </pre>

            <Show when={isAuthenticated()}>
                <p>Authenticated with id {authState()!.id}</p>
            </Show>

            <AuthForm />
        </div>
    );
};

The Signal is set in some event handler from a third-party library. The effect runs and prints the new authState when it updates, but the actual component/markup itself just refuses to update it. I tried directly calling setAuthState and that somehow works, but inside a timeout or a third-party event handler, it doesn't. Any clues?

1 Reply

ringsigOP•2y ago

Never mind it appears to be an issue with the third-party library. It somehow breaks reactivity in my entire app

Gaming

Programming

Component doesn't react to changes in Signal