SolidJS•15mo ago

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•15mo ago

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

REEEEE•15mo 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•15mo 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•15mo 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•15mo ago

nikivi•15mo ago

actually that did not work either will try on now

REEEEE•15mo ago

You need to untrack in the setTodos

nikivi•15mo 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•15mo ago

Sure

nikivi•15mo 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?