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

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

SolidJS•3y ago•

4 replies

bigmistqke

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

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

Solid Playground

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

setting signal inside createRenderEffect

Similar Threads

setting signal inside createRenderEffect

Similar Threads

Similar Threads

Similar Threads