Preact useEffect issues

Hi, I’ve made a brand new fresh project with deno run -A -r https://fresh.deno.dev my-app , but cannot get useEffect/useLayoutEffect to log a message:

import { h } from "preact";
import { useEffect, useState } from "preact/hooks";
import * as log from "log";
import { tw } from "@twind";
import Counter from "../islands/Counter.tsx";

export default function Home() {
  log.warning("outside"); // Works

  useEffect(() => {
    log.warning("EFFECT"); // Doesn't work
  });

  return (
    <div class={tw`p-4 mx-auto max-w-screen-md`}>
      <p class={tw`my-6`}>
        Welcome to `fresh`. Try update this message in the ./routes/index.tsx
        file, and refresh.
      </p>
      <Counter start={3} />
    </div>
  );
}

Please tell me what I’m doing wrong, I’ve tried many combinations of useEffect’s dependency array and triggering useStates. I’ve also tried adding and removing preact/hooks in the import_map.json.

[imaginamundo]

Hii, useEffect is a client side hook to preact. It means that it runs in the browser. Fresh uses the islands based client hydration, to you have a javascript generated to the client, you have to create a component inside the folder islands and then import it. After this useEffect should work fine.

Read more about it here: https://fresh.deno.dev/docs/concepts/islands

[iamsahilsonawane]

@rafa-icon @Rafie97 I can replicate this issue. For now, you can use the browser dev tools console to see the logs.

Issue Statement

@lucacasonato The logs outside the preact elements log the statement in the console. But logs written in the preact components (like useEffect) are not rendered in the terminal console but in the dev tools console.

Reproducible code

Referencing the same code as above:

export default function AnyIslandComponent() {
  log.warning("outside");

  useEffect(() => {
    log.warning("EFFECT");
  });

  return <div>Logging issue</div>;
}

Results:

Terminal console:

outside

Browser dev tools console:

outside EFFECT

---

Dev Tools recording snippet

https://user-images.githubusercontent.com/47249618/177977056-0cd10eec-e32e-444a-b64f-2cb91219f197.mp4