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:

bunfig.toml

[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.

bunfig.toml

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

Examples#

example.jsx1 problem

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

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

example.jsx1 problem

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

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

example.jsxNo problems

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:

example.jsxNo problems

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

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

Options#

Option	Default	What it does
`pattern`	none	A regular expression for the names to report, in place of `render` and a capital letter.

example.jsxwith { "pattern": "^(render|draw)[A-Z]" }1 problem

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

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