SolidJS•12mo ago

setting signal inside createRenderEffect

say I have the following code

function Counter() {
  const [count, setCount] = createSignal(1);
  const [other, setOther] = createSignal(1);
  const increment = () => setCount(count() + 1);

  createRenderEffect(() => console.log("effect", other()));

  createRenderEffect(() => {
    setOther(count());
    console.log("render");
  });

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const [other, setOther] = createSignal(1);
  const increment = () => setCount(count() + 1);

  createRenderEffect(() => console.log("effect", other()));

  createRenderEffect(() => {
    setOther(count());
    console.log("render");
  });

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

I assumed in the above example, first all the effects dependent of other would be run, so it would log after clicking 2 times

effect 1
render
effect 2
render
effect 3
render

effect 1
render
effect 2
render
effect 3
render

but instead we get

effect 1
render
render
effect 2
render
effect 3

effect 1
render
render
effect 2
render
effect 3

initially it is executed directly as it is declared, as expected, but then afterwards the effects will only run after the current effect is completed. I understand it's not ideal to set signals during effects, probably for these sort of things, but I wonder if there is an escape hatch. playground: https://playground.solidjs.com/anonymous/d4a6e547-9bd0-4b63-9e72-f47b25a16b01

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

3 Replies

jmp•12mo ago

I'm not sure if this would work for your use case, but if you make "render" dependent on updates to other rather than updates to count, you'll get properly alternating effects and renders: https://playground.solidjs.com/anonymous/231201e1-546a-4621-9124-b345fea0caf9

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

jmp•12mo ago

I guess I'm not sure what dependency graph you have in mind? do you want "render" to run every time other is updated or only when other is updated by count? If the latter, maybe there's another way to express that dependency graph

bigmistqkeOP•12mo ago

mm, I went in another direction for the api for now because it felt a bit hacky... if I decide to do the original api I will check out if that could be the fix

Gaming

Programming

setting signal inside createRenderEffect