Remove warning for ref cleanup function (#28883)
Resources - RFC: https://github.com/reactjs/rfcs/pull/205 - Warning implemented in https://github.com/facebook/react/pull/22313 - Warning enabled in https://github.com/facebook/react/pull/23145 - Feature added in https://github.com/facebook/react/pull/25686 We have warned to prevent the old behavior since 18.0.0. The new feature has been on in canary for a while but still triggering the warning. This PR cleans up the warning for 19
Jack Pope committed
Apr 22, 2024 at 10:57 UTC
db913d8e17db25045e0518f3621f1640f2390525
2 files changed
+2
-53
packages/react-dom/src/__tests__/refs-test.js
-41
@@ -706,45 +706,4 @@ describe('refs return clean up function', () => {
706
expect(setup).toHaveBeenCalledTimes(1);
707
expect(cleanUp).toHaveBeenCalledTimes(1);
708
});
709
-
710
- it('warns if clean up function is returned when called with null', async () => {
711
- const container = document.createElement('div');
712
- const cleanUp = jest.fn();
713
- const setup = jest.fn();
714
- let returnCleanUp = false;
715
-
716
- const root = ReactDOMClient.createRoot(container);
717
- await act(() => {
718
- root.render(
719
- <div
720
- ref={_ref => {
721
- setup(_ref);
722
- if (returnCleanUp) {
723
- return cleanUp;
724
- }
725
- }}
726
- />,
727
- );
728
- });
729
-
730
- expect(setup).toHaveBeenCalledTimes(1);
731
- expect(cleanUp).toHaveBeenCalledTimes(0);
732
-
733
- returnCleanUp = true;
734
-
735
- await expect(async () => {
736
- await act(() => {
737
- root.render(
738
- <div
739
- ref={_ref => {
740
- setup(_ref);
741
- if (returnCleanUp) {
742
- return cleanUp;
743
- }
744
- }}
745
- />,
746
- );
747
- });
748
- }).toErrorDev('Unexpected return value from a callback ref in div');
749
- });
709
});
packages/react-reconciler/src/ReactFiberCommitWork.js
+2
-12
@@ -318,30 +318,20 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
318
}
319
}
320
} else if (typeof ref === 'function') {
321
- let retVal;
321
try {
322
if (shouldProfile(current)) {
323
try {
324
startLayoutEffectTimer();
326
- retVal = ref(null);
325
+ ref(null);
326
} finally {
327
recordLayoutEffectDuration(current);
328
}
329
} else {
331
- retVal = ref(null);
330
+ ref(null);
331
}
332
} catch (error) {
333
captureCommitPhaseError(current, nearestMountedAncestor, error);
334
}
336
- if (__DEV__) {
337
- if (typeof retVal === 'function') {
338
- console.error(
339
- 'Unexpected return value from a callback ref in %s. ' +
340
- 'A callback ref should not return a function.',
341
- getComponentNameFromFiber(current),
342
- );
343
- }
344
- }
335
} else {
336
// $FlowFixMe[incompatible-use] unable to narrow type to RefObject
337
ref.current = null;