[Bug]: `react/no-object-type-as-default-prop` is disabled when using a `ref` prop

[JulienR1]

Is there an existing issue for this?

• [X] I have searched the existing issues and my issue is unique
• [X] My issue appears in the command-line and not only in the text editor

Description Overview

Brief description

The react/no-object-type-as-default-prop does not run when a component has a ref prop as a second argument.

Show example of your code (as text format), add images/videos/gifs to help explain example

Both of these components should error because an object type is used as a default prop. However, the second component (with a ref) does not error.

const ErrorIsShown = ({ foo = {} }) => null;
const ErrorIsAbsent = ({ foo = {} }, ref) => null;

Link to repro: https://github.com/JulienR1/eslint-react-no-object-type-as-default-prop-repro

What command(s) did you run to reproduce issue?

npm run lint
# OR
eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0

// .eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: ["plugin:react/recommended"],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  rules: {
    "react/no-object-type-as-default-prop": "error",
    "react/prop-types": "off",
  },
};

Expected Behavior

Brief description

Components with ref props should also generate errors when using default object type props.

eslint-plugin-react version

v7.34.2

eslint version

v8.57.0

node version

v20.12.2

[ljharb]

That's because forwardRef's callback is not a component. Function components take context as a second argument, not ref.

[JulienR1]

Actually, the issue does not come from the ref directly, it comes from having a second argument. If I use forwardRef as described in React's docs, I still don't get an error from eslint.

From what I can see, this behavior is caused by this line in the rule's implementation: having more than one argument in the function will not execute the rule.

Second test:

const ErrorIsShown = ({ foo = {} }) => null;
const ErrorIsAbsent = forwardRef(function({ foo = {} }, ref) {
    return null
});

[ljharb]

I see what you mean. Given that it's fine to have , context in a component, the rule should be triggered regardless of there being more than one param.

[JulienR1]

That is exactly it. Do you want me to set up a PR fixing this?

[ljharb]

That’d be great, thanks!