SolidJS•8mo ago

Universal rendering does not trigger re-render and onMount or onCleanup

I am trying to implement a custom renderer using solid-js/universal but I am not able to get onMount or onCleanup to work, and neither does setCount() re-render. here's my code:

function Component() {
  const [count, setCount] = createSignal(0);

  const interval = setInterval(() => {
    console.log('interval', count());
    setCount((prev) => prev + 1);
  }, 1000);

  onMount(() => {
    console.log('mounted');
  });

  onCleanup(() => {
    console.log('cleanup');
    clearInterval(interval);
  });

  return (
    <View>
      <Text>{count()}</Text>
    </View>
  );
}

render(() => <Component />, customDom.root);

setInterval(() => {
  console.log(customDom.toString());
}, 1000);

function Component() {
  const [count, setCount] = createSignal(0);

  const interval = setInterval(() => {
    console.log('interval', count());
    setCount((prev) => prev + 1);
  }, 1000);

  onMount(() => {
    console.log('mounted');
  });

  onCleanup(() => {
    console.log('cleanup');
    clearInterval(interval);
  });

  return (
    <View>
      <Text>{count()}</Text>
    </View>
  );
}

render(() => <Component />, customDom.root);

setInterval(() => {
  console.log(customDom.toString());
}, 1000);

5 Replies

TwilightOP•8mo ago

output looks like this

interval 0 // inner interval
<root><view>The count is:<text>0</text></view></root> // outer interval
interval 1
<root><view>The count is:<text>0</text></view></root>
interval 2
<root><view>The count is:<text>0</text></view></root>

interval 0 // inner interval
<root><view>The count is:<text>0</text></view></root> // outer interval
interval 1
<root><view>The count is:<text>0</text></view></root>
interval 2
<root><view>The count is:<text>0</text></view></root>

mdynnl•8mo ago

it's possible that, instead of the usual browser one, server build is getting pullled in which is not reactive. e.g you'r running this in node

TwilightOP•8mo ago

Hmm, is there no way to make it reactive on the server?

mdynnl•8mo ago

i might have mis-worded here. the usual browser build should also run fine on node, it doesn't use browser specific api https://github.com/solidjs/solid/blob/a72d393a07b22f9b7496e5eb93712188ccce0d28/packages/solid/package.json#L50-L84 i'm not sure if there's any reliable methods rather than patching this. you could try node --conditions browser ... ( node -C browser ... )

TwilightOP•8mo ago

Thanks 🙏 🙏 it worked with node -C browser, thanks

Gaming

Programming

Universal rendering does not trigger re-render and onMount or onCleanup