useClientEffect$ console.log is not printing in browser console.

[srinivas-dev-reddy]

Qwik Version

0.9.0

Operating System (or Browser)

Chrome

Node Version (if applicable)

16.16.0

Which component is affected?

Qwik Runtime

Expected Behaviour

When using useClientEffect$ i would assume that it would run in browser console as only browser needs to execute the code.

Actual Behaviour

When using useClientEffect$ console.log is not printing in browser console.

Additional Information

Below is my code i am using

## For fancy-name

import {
  component$,
  Slot,
  useClientEffect$,
} from "@builder.io/qwik";

export default component$(() => {
  console.log("Fancy Name");
  useClientEffect$(() => {
    console.log("Client effect fancy name");
  });
  return (
      <Slot />
  );
});

## For Root Route

import { component$, useClientEffect$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import AboutQwik from "~/components/about-qwik/about-qwik";
import FancyName from "~/components/fancy-name/fancy-name";

export const fancyName ="Some";

export default component$(() => {
  useClientEffect$(() => {
    console.log(fancyName);
  });
  console.log("Root route");
  return (
    <FancyName>
      <section>
        <AboutQwik />
      </section>
    </FancyName>
  );
});

export const head: DocumentHead = {
  title: "Welcome to Qwik 2",
};

[manucorporat]

This is technically very tricky, but I am commited to solve it, have a good idea. Problem is that <Slot/> and the components themselves do not have a DOM element, and useEffectClient() works by attaching a qvisible event, in your demo, there is not any element to attach it, and gets lots.

you can solve it right now by adding a <div>:

  return (
  <div>
    <FancyName>
      <section>
        <AboutQwik />
      </section>
    </FancyName>
</div>
  );

This is not a solution, just a workaround for you. Ideally Qwik should keep the pending events in SSR and emit it in the next available element, whenever it's in the tree

[cmbartschat]

Observing that this seems to be fixed (for my case at least) by adding {eagerness: 'load'}. Potentially, "invisible" components could have that behavior by default. Or maybe "load" effects should have a different hook name than "view" effects so that devs don't get get confused on this.

[meenie]

For anyone else wondering about @cmbartschat saying they needed to use {eagerness: 'load'} on the useClientEffect$() as well as adding the wrapping <div />, it's because either the Component was rendered off the page or, like me, had the browser tab occluded which means it wasn't "visible" (the default option) and wasn't firing. That was fun lol. So ya, if you component that has the useClientEffect$() is not occluded, then you don't need to use {eagerness: 'load'}.