[🐞] useClientMount and useClientEffect doesn't seem to work

[alkeryn]

Which component is affected?

Qwik Runtime

Describe the bug

Hey i tried a bunch of things but even the timer provided example does nothing, the component simply does't update
even console.log() seems to do nothing, any idea ?

Reproduction

qwik 0.14.1

Steps to reproduce

just try the useClientEffect timer example from : https://qwik.builder.io/docs/components/lifecycle/

System Info

System:
    OS: Linux 6.0 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 1.14 GB / 15.52 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 19.2.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Brave Browser: 102.1.39.111
    Chromium: 108.0.5359.71
    Firefox: 107.0.1

Additional Information

one thing to note is that when i click on the "Blow my mind" button and go back, then they do work, but they fail again when the page is refreshed.

[zanettin]

Hi @alkeryn
Thanks for raising this issue 🙏 It seems to be related to two other issues which are already open (#1413 and #1955 ).
As a temporary workaround you can change the last line of the example as follow:

from:
return <>{store.count}</>;

to:
return <div>{store.count}</div>; // or any other html tag

[alkeryn]

oh thanks for that tip!
though, not being able to use fragments with it can prove another issue, hope it'll get fixed soon ! :)

[cmbartschat]

Something that isn't super clear from the docs is that if a component mounted on the server, useClientMount$ will not run when the page loads. So from the docs:

Times: exactly once per component instance

I would suggest:

Times: exactly once per component instance, or never if the component was present on the initial page load

For the code example, I think it's worth drawing extra attention to the fact that useServerMount$ and useClientMount$ are mutually exclusive:

import { component$, useStore, useServerMount$, useClientMount$} from '@builder.io/qwik';

export default component$(() => {
  const store = useStore({
    location: '',
  });
  useServerMount$(() => {
    store.location = 'server'
  });
  useClientMount$(() => {
    store.location = 'client' // This will only occur if there is client-side navigation, or the component only started being rendered after the initial page load
  });
  return <>I mounted {store.location} side!</>;
});

Here's a thread on discord where you can see the confusion play out in real time: https://discord.com/channels/842438759945601056/1048474481749921903/1048499061055029329

[manucorporat]

Agree that the docs can be better, gonna work on those this week! however things make more sense when you get the right mental model of qwik, code executes in the server and continues in the browser. Calling twice mount would be weird no?

In qwik, you need to really think about pausing and continuing execution in the client, qwik will not execute again what already happened in the server.

[cmbartschat]

Thanks for taking a look! Comparing the wording of these two hooks, the subtleties of what "mount" means in Qwik's mental model is a little muddy.

useClientMount$() - Trigger: component mount
useClientEffect$() - Trigger: component mount and on tracked state changes

This wording would make devs think that useClientMount$ is the same as a useClientEffect$ that only runs once.

[manucorporat]

in a way, they happen once... but at different times, one before render the other after.

[manucorporat]

i am even thinking that removing useServerMount$() and useClientMount$() might be a good idea, only have useMount$() and then use isServer or isBrowser conditionals...

[cmbartschat]

I was kind of thinking the same thing, but will it allow server-only dependencies to be stripped out correctly? Don't want more of: #1477

[manucorporat]

it production yes, but a bit more risky some side effects might be remaining, let's see if we can find a better way to explain useServerMount$() or useClientMount$()! ideas for a PR in the docs?

[cmbartschat]

Sure, I can look at drafting up some clarifications.