S
SolidJS•3w ago
gsoutz

I need to run an effect when an async signal or a store signal, or another async signal are equal

import { createEffect, createMemo, createSignal } from 'solid-js';
import { render } from 'solid-js/web';
import { createAsync } from '@solidjs/router'

const rnd_int = () => Math.ceil(Math.random() * 10)

function App() {

  let [a, set_a] = createSignal()
  let [b, set_b] = createSignal()

  let d_a = createAsync(async () => a())
  let d_b = createMemo(() => b())

  const is_diff = createMemo(() => d_a() !== d_b())

  createEffect(() => {
    if (is_diff()){ 
      return
    }
    console.log(a(), b(), a() === b())
  })

  setInterval(() => {
    set_a(rnd_int())
  }, 100)
  setInterval(() => {
    set_b(rnd_int())
  }, 250)

  return (<></>)
}

render(() => <App />, document.getElementById('app')!);
import { createEffect, createMemo, createSignal } from 'solid-js';
import { render } from 'solid-js/web';
import { createAsync } from '@solidjs/router'

const rnd_int = () => Math.ceil(Math.random() * 10)

function App() {

  let [a, set_a] = createSignal()
  let [b, set_b] = createSignal()

  let d_a = createAsync(async () => a())
  let d_b = createMemo(() => b())

  const is_diff = createMemo(() => d_a() !== d_b())

  createEffect(() => {
    if (is_diff()){ 
      return
    }
    console.log(a(), b(), a() === b())
  })

  setInterval(() => {
    set_a(rnd_int())
  }, 100)
  setInterval(() => {
    set_b(rnd_int())
  }, 250)

  return (<></>)
}

render(() => <App />, document.getElementById('app')!);
This equality test is supposed to make sure not pass forward when the memos are not equal but it does why, and how can I make sure it only passes when they are equal. https://playground.solidjs.com/anonymous/70c547e4-4c55-407f-a31a-d369aa3028eb
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
4 Replies
gsoutz
gsoutzOP•3w ago
there is 2 separate async data is loading, and they are changing over time, i want to display the view only when both data are loaded and in sync.
peerreynders
peerreynders•3w ago
A rough rethink: 
const is_diff = createMemo(() => {
  return d_a() === d_b() ? [d_a(), d_b()] : undefined;
});

createEffect(() => {
  const result = is_diff();
  if (!result) return;
  const [a, b] = result;
  console.log(a, b);
});
const is_diff = createMemo(() => {
  return d_a() === d_b() ? [d_a(), d_b()] : undefined;
});

createEffect(() => {
  const result = is_diff();
  if (!result) return;
  const [a, b] = result;
  console.log(a, b);
});
Keep in mind that reactivity and effects are scheduled differently; signals are not events.
peerreynders
peerreynders•3w ago
You need to untrack: console.log(a(), b(), a() === b()) 
const is_diff = createMemo(() => d_a() !== d_b());

createEffect(
  on(is_diff, (v) => {
    if (v) return;
    console.log(a(), b());
  })
);
const is_diff = createMemo(() => d_a() !== d_b());

createEffect(
  on(is_diff, (v) => {
    if (v) return;
    console.log(a(), b());
  })
);
on Successive true values won't trigger the effect.
on - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
mdynnl
mdynnl•3w ago
currently, only createAsync is there without isPending which should be in solid 2 so while you still could wait for async to resolve using Suspense, createResource should give you more control over loading state and then check for completion state i assume the playground is a minimal example but createAsync should contain some async operation, and i guess you probably have one in actual code yeah, also this, at this point you want on https://playground.solidjs.com/anonymous/962690f5-7359-40bc-aaab-d4aa3ea1f649

Did you find this page helpful?