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

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

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

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")!);

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")!);

SolidJS•4y ago•

3 replies

FutureLights

Solid JS force rerender on signal change

setTimeout

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

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

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")!);

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")!);

Solid JS force rerender on signal change

Similar Threads

Solid JS force rerender on signal change

Similar Threads

Similar Threads

Similar Threads