How to have an effect that does not subscribe to the signal's values?

I have this effect: https://github.com/nikitavoloboev/kuskus/blob/main/src/components/Page.tsx#L15

  createEffect(() => {
    if (event()?.key === "Backspace") {
      setTodos(todos().filter((todo) => todo.id !== focusedTodo()))
    }
  })

  createEffect(() => {
    if (event()?.key === "Backspace") {
      setTodos(todos().filter((todo) => todo.id !== focusedTodo()))
    }
  })

Namely above code that when I press Backspace key, it enters into infinite loop that breaks the app. The doc of the package says I should put it in effect however: https://www.npmjs.com/package/@solid-primitives/keyboard So I am not sure how to get around this issue. Is there way to stop the subscribing to todos()?

10 Replies

REEEEE•2y ago

You can use untrack to disable tracking for todos signal or on to specify dependencies for the effect

REEEEE•2y ago

https://www.solidjs.com/docs/latest/api#on

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

REEEEE•2y ago

https://www.solidjs.com/docs/latest/api#untrack

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

nikivi•2y ago

  createEffect(() => {
    if (event()?.key === "Backspace") {
      setTodos(todos().filter((todo) => todo.id !== focusedTodo()))
    }
    untrack(() => console.log(todos()))
  })

  createEffect(() => {
    if (event()?.key === "Backspace") {
      setTodos(todos().filter((todo) => todo.id !== focusedTodo()))
    }
    untrack(() => console.log(todos()))
  })

this is nice thank you although one thing I dont fully get from reading docs I need to activate todos() somehow in that untrack function?

nikivi•2y ago

nikivi•2y ago

actually that did not work either will try on now

REEEEE•2y ago

You need to untrack in the setTodos

nikivi•2y ago

should i wrap the whole thing in untrack?

  createEffect(() => {
    if (event()?.key === "Backspace") {
      untrack(() => setTodos(todos().filter((todo) => todo.id !== focusedTodo())))
    }
  })

  createEffect(() => {
    if (event()?.key === "Backspace") {
      untrack(() => setTodos(todos().filter((todo) => todo.id !== focusedTodo())))
    }
  })

REEEEE•2y ago

Sure

nikivi•2y ago

that worked wow ok think I got it, thanks ❤️

Gaming

Programming

How to have an effect that does not subscribe to the signal's values?