home

Diagnostics

LUM2005: Children inserted twice

children is inserted more than once.

Severity: warning · Category: reactivity (2xxx)

Reported by: the compiler. A warning.

#What it means

children is lazy: each insertion evaluates it, creating a second set of nodes (or moving the first). Components below are instantiated twice, with separate state.

#Example

tsx
export function Tabs(props: { children?: JSX.Element }) {
  return (
    <div>
      <nav>{props.children}</nav>
      <main>{props.children}</main>
    </div>
  );
}

#How to fix it

Insert children once. To render content several times, accept a render function and call it in each place:

tsx
export function Tabs(props: { renderTab: () => JSX.Element }) {
  return (
    <div>
      <nav>{props.renderTab()}</nav>
      <main>{props.renderTab()}</main>
    </div>
  );
}