react-hooks/static-components

React decides whether an element is the same one as last time by comparing the component function. A component created inside another component is a new function on every render. React then throws the old subtree away and mounts a new one, so it loses its state, its DOM nodes are rebuilt, and any input in it loses focus.

The rule reports a JSX tag that's a local variable holding a function written in the component, the result of a call, or the result of new.

Configure#

Off by default. To turn it on:

[lint.rules]
"react-hooks/static-components" = "error" # or "warn"

Examples#

Reported:

function Form({ label }) {
  const Field = () => <input placeholder={label} />;
  return <Field />;
}

function Page({ theme }) {
  const Panel = createPanel(theme);
  return <Panel />;
}

Not reported:

function Field({ label }) {
  return <input placeholder={label} />;
}

function Form({ label }) {
  return <Field label={label} />;
}

Choosing between components that already exist is fine:

function Heading({ large, children }) {
  const Tag = large ? BigTitle : SmallTitle;
  return <Tag>{children}</Tag>;
}