SolidJSS
SolidJS•3y ago•
1 reply
ringsig

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;


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>
    );
};


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?
Was this page helpful?