S
SolidJS•4mo ago
gsoutz

createComputed, one dependency changes quickly the first dependencies first reactivity is lost

    createComputed(on(() => {
        let pvs = stockfish.pvs[fen()]

        console.log('dep', fen(), pvs)
        if (pvs) {
            let res: [FEN, MultiPV] = [fen(), pvs]
            return res
        }
    }, on_fen_eval_request_resolved))
    createComputed(on(() => {
        let pvs = stockfish.pvs[fen()]

        console.log('dep', fen(), pvs)
        if (pvs) {
            let res: [FEN, MultiPV] = [fen(), pvs]
            return res
        }
    }, on_fen_eval_request_resolved))
this is a solidjs createComputed, there are 2 dependencies, stockfish.pvs object and fen(). The problem is when fen() changes in quick succession without waiting for the stockfish.pvs dependencies lookup for the first fen, the reactivity from the first fen and the stockfish.pvs's lookup on the first fen is lost. I expected that no matter how many times and whenever fen changes, every change of fen and every log of 'dep' has a resulting resolution with a callback to on_fen_eval_request_resolved. Here is an MVP: https://playground.solidjs.com/anonymous/095701fc-c776-4158-aa38-b21d09746406 
import { createComputed, createSignal, on } from "solid-js";
import { createStore } from "solid-js/store";
import { render } from "solid-js/web";

type A = number
type B = string

function App() {

  let bb: Record<A, B> = {}

  const [b_store, set_b_store] = createStore({
    bb
  })

  const [a, set_a] = createSignal(0)

  const on_a_b = (ab: [A, B] | undefined) => {
    if (!ab) {
      return
    }
    console.log(ab)
  }

  createComputed(on(() => {
    let b = b_store.bb[a()]
    if (!b) {
      return undefined
    }
    let res: [A, B] = [a(), b]
    return res
  }, on_a_b))


  function normal() {
    console.log('Normal')
    set_a(0)
    set_b_store("bb", 0, "zero")


    set_b_store("bb", 1, "one")
    set_a(1)

    console.log('Losing 2')
    set_a(2)
    set_a(3)
    set_b_store("bb", 2, "two")
    set_b_store("bb", 3, "three")
     
  }


  normal()

  return (<> </>)
}


render(() => <App />, document.getElementById("app")!);
import { createComputed, createSignal, on } from "solid-js";
import { createStore } from "solid-js/store";
import { render } from "solid-js/web";

type A = number
type B = string

function App() {

  let bb: Record<A, B> = {}

  const [b_store, set_b_store] = createStore({
    bb
  })

  const [a, set_a] = createSignal(0)

  const on_a_b = (ab: [A, B] | undefined) => {
    if (!ab) {
      return
    }
    console.log(ab)
  }

  createComputed(on(() => {
    let b = b_store.bb[a()]
    if (!b) {
      return undefined
    }
    let res: [A, B] = [a(), b]
    return res
  }, on_a_b))


  function normal() {
    console.log('Normal')
    set_a(0)
    set_b_store("bb", 0, "zero")


    set_b_store("bb", 1, "one")
    set_a(1)

    console.log('Losing 2')
    set_a(2)
    set_a(3)
    set_b_store("bb", 2, "two")
    set_b_store("bb", 3, "three")
     
  }


  normal()

  return (<> </>)
}


render(() => <App />, document.getElementById("app")!);
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
3 Replies
Dakotys
Dakotys•4mo ago
It is unclear what is the problem, the callback is always called you are just not logging it if its undefined 
  const on_a_b = (ab: [A, B] | undefined) => {
    console.log(ab)
  }

  createComputed(on(() => {
    let b = b_store.bb[a()]
    if (!b) {
      return [a(), undefined]
    }
    let res: [A, B] = [a(), b]
    return res
  }, on_a_b))
  const on_a_b = (ab: [A, B] | undefined) => {
    console.log(ab)
  }

  createComputed(on(() => {
    let b = b_store.bb[a()]
    if (!b) {
      return [a(), undefined]
    }
    let res: [A, B] = [a(), b]
    return res
  }, on_a_b))
No description
gsoutz
gsoutzOP•4mo ago
but on this line: set_b_store("bb", 2, "two"), the a 2 and b 'two' are both defined so I am losing a [2, 'two'], it quickly jumps to [3, 'three']
Dakotys
Dakotys•4mo ago
That they are defined doesn't mean anything, you are changing what is supposed to be tracked, the combination of signal that is reactive used as index in a store that is also reactive, but granular reactivity inside the store means that only accessed values will be tracked. It was unclear what your goal was. I still don't understand what is the point of the signal. There are 3 ways i can interpret your problem. 1. Either you want to have a reactive array where you want to have control of which indexes are tracked. Then you can have a function trackAtIndex that crates new createComputed for index that was used as parameter. 2. Or perhaps more complex version where you can add and also remove indexes that will be tracked. 3. Or you just want to track some index until the first change that occurs at that index and than stop tracking it 
set_a(0)
set_b_store("bb", 0, "zero")
set_a(0)
set_b_store("bb", 0, "zero")
or if at the time of the call it is already defined call it immediately without tracking? 
set_b_store("bb", 1, "one")
set_a(1)
set_b_store("bb", 1, "one")
set_a(1)
in that case look at https://playground.solidjs.com/anonymous/1a6c663f-d9df-4d3a-8129-9cd14d3b7a5b the already defined reactions will call the callback sooner because of how set store is implemented 4. Maybe different interpretation?
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template

Did you find this page helpful?