Error: Hook can only be invoked from render methods

[mindon]

If merging handler and render with a async render using hook, error throwed

here's the example in Multiple Sibling Islands with Shared State
https://fresh.deno.dev/docs/examples/sharing-state-between-islands

export default async function Home() {
  const sliderSignal = useSignal(50);
  // ...
}

Error: Hook can only be invoked from render methods

[UPDATE] In this case, using Independent Islands example should be the proper way (error comes from that the handler part run on the server)

[deer]

A very minimal reproduction is:

import { useSignal } from "@preact/signals";

export default async function Home() {
  const sliderSignal = useSignal(50);
  return "hi";
}

This works fine:

import { useSignal } from "@preact/signals";

export default function Home() {
  const sliderSignal = useSignal(50);
  return "hi";
}

[marvinhagemeister]

Yup, under the hood async route components aren't really components but rather a function that happens to return JSX. Because of the missing component instance hooks don't work. Support for proper async components is currently in the works, but needs a bit more time to cook.

[uptownhr]

@marvinhagemeister any update on if this is a roadmap?

[marvinhagemeister]

We .. err might walk back on that one. Async components are supported in Preact, but not with hooks and it turns out it's a hell to do so without a custom transpile pass. So we're likely not shipping that in Fresh 2. Been meaning to write an update on the current state of things in the Fresh 2 roadmap thread.