Revert "React.pure automatically forwards ref" (#13887)
Reverts #13822. We're not sure we want to do this.
Sophie Alpert committed
Oct 18, 2018 at 18:53 UTC
0648ca618d712c6c47425b62412ae2aaab19c438
2 files changed
+6
-66
packages/react-reconciler/src/ReactFiberBeginWork.js
+3
-4
@@ -242,7 +242,6 @@ function updatePureComponent(
242
renderExpirationTime: ExpirationTime,
243
) {
244
const render = Component.render;
245
- const ref = workInProgress.ref;
245
246
if (
247
current !== null &&
@@ -253,7 +252,7 @@ function updatePureComponent(
252
// Default to shallow comparison
253
let compare = Component.compare;
254
compare = compare !== null ? compare : shallowEqual;
256
- if (workInProgress.ref === current.ref && compare(prevProps, nextProps)) {
255
+ if (compare(prevProps, nextProps)) {
256
return bailoutOnAlreadyFinishedWork(
257
current,
258
workInProgress,
@@ -268,10 +267,10 @@ function updatePureComponent(
267
if (__DEV__) {
268
ReactCurrentOwner.current = workInProgress;
269
ReactCurrentFiber.setCurrentPhase('render');
271
- nextChildren = render(nextProps, ref);
270
+ nextChildren = render(nextProps);
271
ReactCurrentFiber.setCurrentPhase(null);
272
} else {
274
- nextChildren = render(nextProps, ref);
273
+ nextChildren = render(nextProps);
274
}
275
276
// React DevTools reads this flag.
packages/react-reconciler/src/__tests__/ReactPure-test.internal.js
+3
-62
@@ -39,10 +39,10 @@ describe('pure', () => {
39
// a lazy function component.
40
sharedTests('normal', (...args) => {
41
const Pure = React.pure(...args);
42
- function Indirection(props, ref) {
43
- return <Pure {...props} ref={ref} />;
42
+ function Indirection(props) {
43
+ return <Pure {...props} />;
44
}
45
- return Promise.resolve(React.forwardRef(Indirection));
45
+ return Promise.resolve(Indirection);
46
});
47
sharedTests('lazy', (...args) => Promise.resolve(React.pure(...args)));
48
@@ -195,65 +195,6 @@ describe('pure', () => {
195
{withoutStack: true},
196
);
197
});
198
-
199
- it('forwards ref', async () => {
200
- const {unstable_Suspense: Suspense} = React;
201
- const Transparent = pure((props, ref) => {
202
- return <div ref={ref} />;
203
- });
204
- const divRef = React.createRef();
205
-
206
- ReactNoop.render(
207
- <Suspense fallback={<Text text="Loading..." />}>
208
- <Transparent ref={divRef} />
209
- </Suspense>,
210
- );
211
- ReactNoop.flush();
212
- await Promise.resolve();
213
- ReactNoop.flush();
214
- expect(divRef.current.type).toBe('div');
215
- });
216
-
217
- it('updates if only ref changes', async () => {
218
- const {unstable_Suspense: Suspense} = React;
219
- const Transparent = pure((props, ref) => {
220
- return [<Text key="text" text="Text" />, <div key="div" ref={ref} />];
221
- });
222
-
223
- const divRef = React.createRef();
224
- const divRef2 = React.createRef();
225
-
226
- ReactNoop.render(
227
- <Suspense fallback={<Text text="Loading..." />}>
228
- <Transparent ref={divRef} />
229
- </Suspense>,
230
- );
231
- expect(ReactNoop.flush()).toEqual(['Loading...']);
232
- await Promise.resolve();
233
- expect(ReactNoop.flush()).toEqual(['Text']);
234
- expect(divRef.current.type).toBe('div');
235
- expect(divRef2.current).toBe(null);
236
-
237
- // Should re-render (new ref)
238
- ReactNoop.render(
239
- <Suspense>
240
- <Transparent ref={divRef2} />
241
- </Suspense>,
242
- );
243
- expect(ReactNoop.flush()).toEqual(['Text']);
244
- expect(divRef.current).toBe(null);
245
- expect(divRef2.current.type).toBe('div');
246
-
247
- // Should not re-render (same ref)
248
- ReactNoop.render(
249
- <Suspense>
250
- <Transparent ref={divRef2} />
251
- </Suspense>,
252
- );
253
- expect(ReactNoop.flush()).toEqual([]);
254
- expect(divRef.current).toBe(null);
255
- expect(divRef2.current.type).toBe('div');
256
- });
198
});
199
}
200
});