bun/react-no-local-render-helpers

A renderItem() function inside a component does the job of a component, but React doesn't see it as one. It's created again on every render, it doesn't show up in React DevTools, and React can't skip it when its input stays the same. Move it out and make it a component.

The rule reports a function if its name is render followed by a capital letter, it's defined inside another function, and it's called or passed to a call in that function's JSX.

Configure

Off by default. To turn it on:

[lint.rules]
"bun/react-no-local-render-helpers" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

[lint.rules]
"bun/react-no-local-render-helpers" = ["error", {
  # pattern = <string>,
}]

Examples

Reported:

function UserList({ users }) {
  const renderUser = user => <li key={user.id}>{user.name}</li>;

  return <ul>{users.map(renderUser)}</ul>;
}

function Page({ title }) {
  function renderHeader() {
    return <h1>{title}</h1>;
  }

  return <main>{renderHeader()}</main>;
}

Not reported:

function User({ user }) {
  return <li>{user.name}</li>;
}

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </ul>
  );
}

A function that's passed as a prop isn't reported:

function UserList({ users }) {
  const renderUser = user => <User user={user} />;

  return <List items={users} renderItem={renderUser} />;
}

Options

function Chart({ points }) {
  const drawPoint = point => <circle key={point.id} cx={point.x} cy={point.y} r="2" />;

  return <svg>{points.map(drawPoint)}</svg>;
}