static-components

Full Name in eslint-plugin-react-x

react-x/static-components

Full Name in @eslint-react/eslint-plugin

@eslint-react/static-components

Features

🧪

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering.

Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, destroying all state and DOM nodes in the process.

If you find yourself wanting to define components inside other components to access local variables, that's a sign you should be passing props instead. This makes components more reusable and testable.

Examples

Invalid

function Parent() {
  // 🔴 Never define a component inside another component!
  const Child = () => <div />;

  return <Child />; // State resets every render
}

function Parent({ type }) {
  // 🔴 Dynamically creating components during render
  const Component = type === "button"
    ? () => <button>Click</button>
    : () => <div>Text</div>;

  return <Component />;
}

Valid

// ✅ Declare components at the top level
function Parent() {
  return <Child />;
}

function Child() {
  return <div />;
}

When a child component needs data from a parent, pass it by props instead of nesting definitions.

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: Nesting and organizing components
• React Docs: static-components Lint Rule

See Also

• react-x/no-nested-component-definitions
  Disallows nesting component definitions inside other components.
• react-x/no-nested-lazy-component-declarations
  Disallows nesting lazy component declarations inside other components or hooks.