SolidJS•2mo ago

Stop infinite recursion when updating state

I need to update a store using it's previous value inside a createEffect. I am using import { useKeyDownEvent } from "@solid-primitives/keyboard"; to handle keyboard inputs. i have a store

const [UserSettingsStore, setUserSettingsStore] = createStore({
  showChat: true, ...})

const [UserSettingsStore, setUserSettingsStore] = createStore({
  showChat: true, ...})

Now according to the docs , I am doing this https://primitives.solidjs.community/package/keyboard#usekeydownevent:

import { useKeyDownEvent } from "@solid-primitives/keyboard";

const event = useKeyDownEvent();

createEffect(() => {
  const e = event();
  console.log(e); // => KeyboardEvent | null

  if (e) {
    setUserSettingsStore("showChat", !UserSettingsStore.showChat)
  }
});

import { useKeyDownEvent } from "@solid-primitives/keyboard";

const event = useKeyDownEvent();

createEffect(() => {
  const e = event();
  console.log(e); // => KeyboardEvent | null

  if (e) {
    setUserSettingsStore("showChat", !UserSettingsStore.showChat)
  }
});

This is causing an infinite loop, since the value update of showChat is retriggering the createEffect. Is there a way to read current value of UserSettingsStore.showChat in a non-reactive way, ie. prevent it from triggering infinite loop

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

4 Replies

REEEEE•2mo ago

use untrack untrack(() => !UserSettingsStore.showChat)

ATA noob•2mo ago

exactly I was looking for. i tried searching for it but I just wasn't getting it. Thank you so much

bigmistqke 🌈•2mo ago

Instead of untrack u can also do setUserSettingsStore("show chat", (showChat) => !showChat)

ATA noob•2mo ago

Thank you, I was using your type of implementation initially. But I also had a few other use cases as well where I needed to access signals without tracking them. untrack helps in those places. Thank you for helping

Gaming

Programming

Stop infinite recursion when updating state