react-hooks/capitalized-calls
Disallow calling a function with a capitalized name from a component or a hook
Also called react_hooks/capitalized-calls, react/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#
import Avatar from "./Avatar";
function Profile({ user }) {
return <section>{Avatar({ user })Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler configAvatar may be a component.}</section>;
}import * as ui from "./ui";
function Profile({ user }) {
return <section>{ui.Avatar({ user })Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler configAvatar may be a component.}</section>;
}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.