useEffect in the islands
Seeing a strange error in the browser window as soon as I add a simple as
![No description](https://cdn.answeroverflow.com/1153697289819402360/image.png)
11 Replies
I'm basically using this structure on an island:
I hope someone has had something similar, any hints,
The exception is happening from this snippet:
![No description](https://cdn.answeroverflow.com/1153698014263771306/image.png)
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. 🦕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 messageGitHub
GitHub - king8fisher/fresh-example at demonstrate-use-effect-issue
Contribute to king8fisher/fresh-example development by creating an account on GitHub.
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".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...
https://github.com/denoland/fresh/issues/1540
I think I found the issue @marvinh. It's a very smart auto-import.
oh no 😅 haven't had a chance to look at that yet
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.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
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...