← Back to rules

react/forward-ref-uses-ref Correctness

💡 A suggestion is available for this rule.

What it does

Requires that components wrapped with forwardRef must have a ref parameter. Omitting the ref argument is usually a bug, and components not using ref don't need to be wrapped by forwardRef.

Why is this bad?

Omitting the ref argument makes the forwardRef wrapper unnecessary, and can lead to confusion.

Examples

Examples of incorrect code for this rule:

var React = require("react");

var Component = React.forwardRef((props) => <div />);

Examples of correct code for this rule:

var React = require("react");

var Component = React.forwardRef((props, ref) => <div ref={ref} />);

var Component = React.forwardRef((props, ref) => <div />);

function Component(props) {
  return <div />;
}

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/forward-ref-uses-ref": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/forward-ref-uses-ref": "error",
  },
});

CLI

oxlint --deny react/forward-ref-uses-ref --react-plugin

Version

This rule was added in v0.16.9.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground