---
title: "react/forward-ref-uses-ref"
description: "Require a component wrapped in `forwardRef` to take a `ref` parameter"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "react"
aliases: []
kind: "suggestion"
category: "correctness"
default: "off"
fixable: "suggestion"
typeAware: false
deprecated: false
---

`forwardRef` passes the parent's `ref` to your component as a second parameter. A component that only takes `props` drops it, so the parent's `ref.current` is never set. Either the `ref` parameter is missing or you don't need the wrapper.

The rule reports a function with exactly one parameter. Your editor offers two suggestions: add a `ref` parameter, or remove the `forwardRef` wrapper.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/forward-ref-uses-ref" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
import { forwardRef } from "react";

const TextInput = forwardRef(props => {
  return <input type="text" value={props.value} />;
});
```

Not reported:

{/* good */}
```jsx
import { forwardRef } from "react";

const TextInput = forwardRef((props, ref) => {
  return <input type="text" value={props.value} ref={ref} />;
});

const Label = props => <label>{props.text}</label>;
```