Skip to content

Commit a9ce35f

Browse files
committed
Add failing test for simple memo components being updated with new set of props during context change
1 parent 0e67969 commit a9ce35f

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed

packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,56 @@ describe('memo', () => {
177177
expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
178178
});
179179

180+
it('bails out on props equality during context change', async () => {
181+
const CountContext = React.createContext(0);
182+
183+
function readContext(Context) {
184+
const dispatcher =
185+
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
186+
.ReactCurrentDispatcher.current;
187+
return dispatcher.readContext(Context);
188+
}
189+
190+
function Inner(props) {
191+
const renderCountRef = React.useRef(0);
192+
readContext(CountContext);
193+
return React.useMemo(() => {
194+
const text = `Inner render count: ${++renderCountRef.current}`;
195+
return <Text text={text} />;
196+
}, [
197+
props,
198+
]);
199+
}
200+
201+
Inner = memo(Inner);
202+
203+
function Outer(props) {
204+
readContext(CountContext);
205+
return <Inner />;
206+
}
207+
208+
function Parent({ value }) {
209+
return (
210+
<Suspense fallback={<Text text="Loading..." />}>
211+
<CountContext.Provider value={value}>
212+
<Outer />
213+
</CountContext.Provider>
214+
</Suspense>
215+
);
216+
}
217+
218+
let ctxValue = 0;
219+
ReactNoop.render(<Parent value={ctxValue++} />);
220+
expect(ReactNoop.flush()).toEqual(['Loading...']);
221+
await Promise.resolve();
222+
expect(ReactNoop.flush()).toEqual(['Inner render count: 1']);
223+
expect(ReactNoop.getChildren()).toEqual([span('Inner render count: 1')]);
224+
225+
ReactNoop.render(<Parent value={ctxValue++} />);
226+
expect(ReactNoop.flush()).toEqual([]);
227+
expect(ReactNoop.getChildren()).toEqual([span('Inner render count: 1')]);
228+
});
229+
180230
it('accepts custom comparison function', async () => {
181231
function Counter({count}) {
182232
return <Text text={count} />;

0 commit comments

Comments
 (0)