Search code examples
javascriptsolid-js

How to swap two signals in SolidJS

How do you swap these signals so that b = prev a and a = prev b?

const [a, setA] = createSignal(50) 
const [b, setB] = createSignal(100)

function swapSignals() {}
Solution

  • We extract values into local variables before running the state updates otherwise they will end up having the same value, and wrap the update logic into batch to prevent multiple re-renders:

    import { batch, createSignal } from 'solid-js';
import { render } from 'solid-js/web';

const App = () => {
  const [a, setA] = createSignal(50)
  const [b, setB] = createSignal(100)

  const swapSignals = () => {
    const x = a();
    const y = b();
    batch(() => {
      setA(y);
      setB(x);
    });
  };

  return (
    <div>
      a: {a()} b: {b()}{` `}<button onClick={swapSignals}>Swap</button>
    </div>
  )
};

render(() => <App />, document.body);

    https://playground.solidjs.com/anonymous/f744c2d3-8333-4f63-bf1e-d1e3665f81a2