← Back to rules

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:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-object-type-as-default-prop": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-object-type-as-default-prop": "error",
  },
});

CLI

oxlint --deny react/no-object-type-as-default-prop --react-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground