react/capitalized-calls Suspicious
What it does
Disallows calling capitalized functions or methods directly during render instead of rendering them with JSX, since capitalized names are reserved for components.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/capitalized-calls.
Why is this bad?
Calling a component as a plain function hides it from React: it gets no state isolation and no hooks context of its own, and it breaks memoization.
Examples
Examples of incorrect code for this rule:
import Child from "./Child";
function Component() {
return <div>{Child()}</div>;
}Examples of correct code for this rule:
import Child from "./Child";
function Component() {
return (
<div>
<Child />
</div>
);
}Configuration
This rule accepts a configuration object with the following properties:
allow
type: string[]
default: []
Exact names of capitalized functions that may be called directly. Forwarded to the React Compiler's validateNoCapitalizedCalls environment option.
allowPattern
type: string
A regex pattern; capitalized functions whose name matches may be called directly, checked alongside allow. Useful when a codebase has a naming convention for capitalized non-component factories, such as generated event or schema builders (e.g. "Event$").
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/capitalized-calls": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/capitalized-calls": "error",
},
});oxlint --deny react/capitalized-calls --react-pluginVersion
This rule was added in v1.79.0.