SolidJSS
SolidJS•3y ago•
3 replies
FutureLights

Solid JS force rerender on signal change

I need to force Solid JS to make changes to the DOM every time a signal changes. Currently it seems that it is batched, probably for performance reasons. I can get around this by wrapping my second signal change in a setTimeout, but I want to make sure I am not implementing a hacky solution. For example, could I reliably get away with using a requestAnimationFrame or is there some Solid JS provided function that I missed?

Here is a code snippet that demonstrates the problem and the timeout fix. If you remove the setTimeout, you will see no change.

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Component() {

  const [state, setState] = createSignal(true);

  const x = () => {
    setState(false);
    setTimeout(() => {
      setState(true);
    }, 0);
  };

  return <button
    onClick={() => x()}
    style={{
      transition: state() ? 'background-color 5s' : 'background-color 0s',
      'background-color': state() ? 'blue' : 'red',
    }}
  >Click</button>;
}

render(() => <Component />, document.getElementById("app")!);
Was this page helpful?