no-render-helper-functions

Reports ordinary functions that return JSX where a component would be a better fit.

Rule details Suggestion

The rule checks function declarations and functions assigned to variables. If a non-PascalCase function returns JSX or a fragment, or is annotated as ReactNode or ReactElement, it is reported.

PascalCase component names are allowed. Hook names that start with use are allowed. Inline callbacks like items.map((item) => <Item key={item.id} />) are allowed. Functions nested inside a PascalCase component are also ignored.

What the rule does not check

It does not inspect class methods, and it does not report helper functions that return plain values like strings or objects.

Examples

Incorrect

Helper function returning JSX

function createLabel(text: string) {
  return <TextLabel text={text} />;
}

const renderItem = (item: string) => <div>{item}</div>;

Correct

Component and inline callback

function Label(props: { text: string }) {
  return <TextLabel text={props.text} />;
}

items.map((item) => <Label key={item} text={item} />);

Related rules

ban-react-fc Keeps component declarations on plain functions instead of React.FC

require-react-display-names Requires component display names