react-hooks/capitalized-calls

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.

Configure

Off by default. To turn it on:

[lint.rules]
"react-hooks/capitalized-calls" = "error" # or "warn"

Examples

Reported:

import Avatar from "./Avatar";

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

import * as ui from "./ui";

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

Not reported:

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>
  );
}

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.