LUM2007: Own signal read in an async body

Severity: warning · Category: reactivity (2xxx)

Reported by: planned (not reported by this version). A warning.

#What it means

Signals read in an async component's body are tracked, and a change re-runs the component. Signals created in the body reset on each run. Reading such a signal in the body therefore re-runs the component whenever it changes, and the re-run re-creates the signal with its initial value: the update is lost.

#Example

export async function Book({ id }: { id: string }) {
  const book = await fetchJSON<Book>(`/api/books/${id}`);
  const open = signal(false);
  if (open()) console.log("open");
  return <button onClick={() => open.set(true)}>{book.title}</button>;
}

#How to fix it

Read the signal in JSX, handlers or effects, which are tracked separately from the body. If the value should survive re-runs, create the signal in a parent and pass it down.

#Related

• Async components