home

Diagnostics

LUM2003: Reactive early return

A sync component returns early based on reactive state.

Severity: error · Category: reactivity (2xxx)

Reported by: the compiler.

#What it means

The body of a sync component runs once, so if (!user()) return <Login /> is decided once and never re-evaluated: the component keeps showing whichever branch it took first.

#Example

tsx
export function Account(props: { user: () => User | null }) {
  if (!props.user()) return <Login />;
  return <Profile user={props.user()!} />;
}

#How to fix it

Move the condition into the JSX, where it becomes a memoised branch:

tsx
export function Account(props: { user: () => User | null }) {
  return <>{props.user() ? <Profile user={props.user()!} /> : <Login />}</>;
}

Early returns on props or values that never change are fine; async components may return early, because their body re-runs.