react/no-object-type-as-default-prop Perf
What it does
Disallows using object, array, function, class, regex, JSX, or new-constructed values as default values for destructured React component props.
Why is this bad?
Default values of destructured parameters are evaluated on every render. When the default is an object literal, array literal, function expression, class expression, regular expression, new expression, or JSX element, a new reference is created on every render. Passing that fresh reference to child components or hook dependency arrays defeats memoization and causes unnecessary re-renders.
Note: you do not need to enable this rule when using React Compiler, since React Compiler memoizes default values automatically.
Examples
Examples of incorrect code for this rule:
function Foo({ items = [] }) {
return <List items={items} />;
}
const Bar = ({ config = {} }) => <div data-config={config} />;
function Baz({ onClick = () => {} }) {
return <button onClick={onClick} />;
}Examples of correct code for this rule:
const DEFAULT_ITEMS = [];
function Foo({ items = DEFAULT_ITEMS }) {
return <List items={items} />;
}
const Bar = ({ name = "world" }) => <div>{name}</div>;
function Baz({ onClick }) {
return <button onClick={onClick} />;
}How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/no-object-type-as-default-prop": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/no-object-type-as-default-prop": "error",
},
});oxlint --deny react/no-object-type-as-default-prop --react-pluginVersion
This rule was added in v1.66.0.