close
Rslint

    no-object-type-as-default-prop

    Added in v0.9.4

    Configuration

    rslint.config.ts
    import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/no-object-type-as-default-prop': 'error',
    },
  },
]);

    Disallow newly created reference values as default props in function components.

    Rule Details

    An inline object, array, function, class, constructed value, regular expression, JSX element, or Symbol() default creates a different value on each render. Passing it to a memoized child or using it as a hook dependency can cause unnecessary renders or a render loop. Use a stable reference instead.

    The rule checks direct property defaults in the first destructured parameter of a detected function component. It does not check nested properties, defaults for the entire parameter, or defaultProps assignments. As in upstream, functions passed directly to component wrappers such as React.memo and React.forwardRef are not checked. JSX fragments and calls other than a direct Symbol() call are outside the rule's checks.

    Examples of incorrect code for this rule:

    function List({ items = [] }) {
  return <Widget items={items} />;
}
    const Panel = ({ options = {}, onChange = () => {} }) => (
  <Widget options={options} onChange={onChange} />
);

    Examples of correct code for this rule:

    const emptyItems = [];

function List({ items = emptyItems, limit = 10 }) {
  return <Widget items={items} limit={limit} />;
}
    const emptyOptions = {};
const noop = () => {};

const Panel = ({ options = emptyOptions, onChange = noop }) => (
  <Widget options={options} onChange={onChange} />
);

    Options

    This rule has no options.

    Original Documentation