S
SolidJS•12mo ago
Twilight

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
Twilight
TwilightOP•12mo 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
mdynnl•12mo 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
Twilight
TwilightOP•12mo ago
Hmm, is there no way to make it reactive on the server?
mdynnl
mdynnl•12mo 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 ... )
Twilight
TwilightOP•12mo ago
Thanks šŸ™ šŸ™ it worked with node -C browser, thanks

Did you find this page helpful?