useEffect in the islands

Seeing a strange error in the browser window as soon as I add a simple as

useEffect(() => {
  console.log('here');
});

useEffect(() => {
  console.log('here');
});

11 Replies

king8fisher•11mo ago

I'm basically using this structure on an island:

if (IS_BROWSER) {
  useEffect(() => {
    console.log('here');
  });
  useSignalEffect(() => {
  // ...
}

if (IS_BROWSER) {
  useEffect(() => {
    console.log('here');
  });
  useSignalEffect(() => {
  // ...
}

I hope someone has had something similar, any hints,

king8fisher•11mo ago

The exception is happening from this snippet:

Deno AI Helper•11mo ago

I'm sorry to hear that you're having trouble. However, the documentation does not provide any specific information about the use of useSignalEffect and useEffect together. It would be helpful if you could provide more details about the error message you're seeing. In general, useEffect is a hook from Preact (or React) that runs side-effects in your component, such as fetching data, setting up subscriptions, or manually changing the DOM. useSignal is a hook from Preact Signals, a state management library for Preact, that creates a reactive state signal. If you're seeing an error, it could be due to a variety of reasons such as incorrect usage of hooks, issues with dependencies, or conflicts between different pieces of state. As a debugging step, you could try isolating the issue by removing other code and seeing if the error still occurs with just the useEffect hook. If the error persists, it could be an issue with how your project is set up. If the error goes away, you can gradually add back other parts of your code to see what's causing the conflict. Remember, this advice isn't from the documentation, but it's a general approach to debugging issues in code. 🦕

Helpful Links: Interactive islands | Fresh docs Program Lifecycle | Manual | Deno Fresh 1.1 - automatic JSX, plugins, DevTools, and more Deno 1.4 Release Notes

king8fisher•11mo ago

Added a reproducible case: https://github.com/king8fisher/fresh-example/tree/demonstrate-use-effect-issue demonstrate-use-effect-issue branch @marvinh. tagging you since you replied to original message

GitHub

GitHub - king8fisher/fresh-example at demonstrate-use-effect-issue

Contribute to king8fisher/fresh-example development by creating an account on GitHub.

king8fisher•11mo ago

To be even more precise, it seems to break even when just a single useEffect is used. Collecting some notes from other issues to come out with a "rule of thumb".

king8fisher•11mo ago

https://github.com/denoland/fresh/issues/1660

GitHub

Can't define signal in async component or when using defineRoute · ...

I just tried making the Home function in a default 1.4.1 project into async and also tried using the new defineRoute method, but I got an error: An error occurred during route handling or page rend...

king8fisher•11mo ago

https://github.com/denoland/fresh/issues/1540 I think I found the issue @marvinh. It's a very smart auto-import.

marvinh.•11mo ago

oh no 😅 haven't had a chance to look at that yet

king8fisher•11mo ago

No problem I had to figure it out anyway 😄 It attempts to auto-import like so: import { useEffect } from "https://esm.sh/v128/preact@10.15.1/hooks/src/index.js"; and in reality it has to be .... from "react/hooks"; I've been bamboozle heavily.

marvinh.•11mo ago

ohh yeah, that likely lead to two different versions of Preact running at the same time. Hooks must use a singleton by design and both library versions can't see each other's variables

king8fisher•11mo ago

I'm sure I'll be bumping into this a lot. Leaving it as a no-fix issue for myself. (https://github.com/king8fisher/fresh-example/issues/1) Possibly: VSCode extension showing a bit more as to where the import is going to come from, as it shows 5 for useEffect and the first one in the list is surely enough the wrong one.

GitHub

Uncaught (in promise) TypeError: Cannot read properties of null (re...

This issue is not for fixing. It's to demonstrate how uncareful importing of a wrong function from the list that VSCode is providing can lead to hours of hunting for a non-existing bug. 54bedaf...