Skip to content

Commit 095dd50

Browse files
authored
Add DEV warning if forwardRef function doesn't use the ref param (#13168)
* Add DEV warning if forwardRef function doesn't use the ref param * Fixed a forwardRef arity warning in another test
1 parent 5662595 commit 095dd50

File tree

3 files changed

+34
-8
lines changed

3 files changed

+34
-8
lines changed

packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ describe('ReactTestRendererTraversal', () => {
201201
});
202202

203203
it('can have special nodes as roots', () => {
204-
const FR = React.forwardRef(props => <section {...props} />);
204+
const FR = React.forwardRef((props, ref) => <section {...props} />);
205205
expect(
206206
ReactTestRenderer.create(
207207
<FR>

packages/react/src/__tests__/forwardRef-test.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,12 @@ describe('forwardRef', () => {
136136
});
137137

138138
it('should warn if the render function provided has propTypes or defaultProps attributes', () => {
139-
function renderWithPropTypes() {
139+
function renderWithPropTypes(props, ref) {
140140
return null;
141141
}
142142
renderWithPropTypes.propTypes = {};
143143

144-
function renderWithDefaultProps() {
144+
function renderWithDefaultProps(props, ref) {
145145
return null;
146146
}
147147
renderWithDefaultProps.defaultProps = {};
@@ -155,4 +155,22 @@ describe('forwardRef', () => {
155155
'Did you accidentally pass a React component?',
156156
);
157157
});
158+
159+
it('should warn if the render function provided does not use the forwarded ref parameter', () => {
160+
function arityOfZero() {
161+
return null;
162+
}
163+
164+
const arityOfOne = props => null;
165+
166+
expect(() => React.forwardRef(arityOfZero)).toWarnDev(
167+
'forwardRef render functions accept two parameters: props and ref. ' +
168+
'Did you forget to use the ref parameter?',
169+
);
170+
171+
expect(() => React.forwardRef(arityOfOne)).toWarnDev(
172+
'forwardRef render functions accept two parameters: props and ref. ' +
173+
'Did you forget to use the ref parameter?',
174+
);
175+
});
158176
});

packages/react/src/forwardRef.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,19 @@ export default function forwardRef<Props, ElementType: React$ElementType>(
1313
render: (props: Props, ref: React$ElementRef<ElementType>) => React$Node,
1414
) {
1515
if (__DEV__) {
16-
warning(
17-
typeof render === 'function',
18-
'forwardRef requires a render function but was given %s.',
19-
render === null ? 'null' : typeof render,
20-
);
16+
if (typeof render !== 'function') {
17+
warning(
18+
false,
19+
'forwardRef requires a render function but was given %s.',
20+
render === null ? 'null' : typeof render,
21+
);
22+
} else {
23+
warning(
24+
render.length === 2,
25+
'forwardRef render functions accept two parameters: props and ref. ' +
26+
'Did you forget to use the ref parameter?',
27+
);
28+
}
2129

2230
if (render != null) {
2331
warning(

0 commit comments

Comments
 (0)