# react-hooks/capitalized-calls

> Disallow calling a function with a capitalized name from a component or a hook

A capitalized name says "component". If you call a component as a plain function, React doesn't know it's there. Its hooks run as the caller's hooks, so its state gets mixed up with the caller's as soon as the call becomes conditional. Render it with JSX instead.

The rule looks inside components and hooks. It reports a call to a capitalized function that comes from outside the component, and a call to a capitalized method such as `ui.Avatar()`. All-caps functions such as `T()` and built-ins such as `Number()`, `String()` and `BigInt()` are allowed.

{/* 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]
"react-hooks/capitalized-calls" = "error" # or "warn"
```

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

## Examples

Reported:

{/* bad */}
```jsx
import Avatar from "./Avatar";

function Profile({ user }) {
  return <section>{Avatar({ user })}</section>;
}
```

{/* bad */}
```jsx
import * as ui from "./ui";

function Profile({ user }) {
  return <section>{ui.Avatar({ user })}</section>;
}
```

Not reported:

{/* good */}
```jsx
import Avatar from "./Avatar";
import { T } from "./translate";

function Profile({ user }) {
  const age = Number(user.age);
  return (
    <section>
      <Avatar user={user} />
      {T("profile.age")}: {String(age)}
    </section>
  );
}
```

{/* good */}
```jsx
function Profile({ user }) {
  const id = BigInt(user.id);
  return <section>{String(id)}</section>;
}
```

With an ESLint config, `BigInt()` and `Symbol()` are reported, like they are in `eslint-plugin-react-hooks`.

## When not to use it

If your code has plain functions with capitalized names, such as factories, every call to them from a component is reported. Rename them, or leave the rule off.