# bun/react-no-local-render-helpers

> Disallow `renderItem()` functions that are defined inside a component and used in its JSX

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml 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.

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

{/* End of the generated section. */}

## Examples

Reported:

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

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

{/* bad */}
```jsx
function Page({ title }) {
  function renderHeader() {
    return <h1>{title}</h1>;
  }

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

Not reported:

{/* good */}
```jsx
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:

{/* good */}
```jsx
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. |

{/* bad {"options": [{"pattern": "^(render|draw)[A-Z]"}]} */}
```jsx
function Chart({ points }) {
  const drawPoint = point => <circle key={point.id} cx={point.x} cy={point.y} r="2" />;

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