Skip to content

Commit ff67e17

Browse files
compulimcompulim
committed
Add useReduceMemo
1 parent 10d1d42 commit ff67e17

File tree

6 files changed

+391
-301
lines changed

6 files changed

+391
-301
lines changed

‎__tests__/html/renderActivity.performance.html‎

Lines changed: 78 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,32 @@
1919
<script type="text/babel" data-presets="env,stage-3,react">
2020
const BATCH_SIZE = 5;
2121

22-
const timesActivityRendered = new Map();
22+
const timesEnhancerCalled = new Map();
23+
const timesHandlerCalled = new Map();
2324

2425
function activityRendered() {
25-
return next => (...args) => {
26-
const [{ activity }] = args;
27-
const renderActivity = next(...args)
28-
timesActivityRendered.set(activity.id, (timesActivityRendered.get(activity.id) ?? 0) + 1);
29-
return (...args) => (
30-
<>
31-
{renderActivity.call ? renderActivity(...args) : renderActivity}
32-
<small> Rendered {timesActivityRendered.get(activity.id)} times</small>
33-
</>
34-
)
35-
}
26+
return next =>
27+
(...args) => {
28+
const [{ activity }] = args;
29+
const renderActivity = next(...args);
30+
31+
timesEnhancerCalled.set(activity.id, (timesEnhancerCalled.get(activity.id) ?? 0) + 1);
32+
33+
return (...args) => {
34+
timesHandlerCalled.set(activity.id, (timesHandlerCalled.get(activity.id) ?? 0) + 1);
35+
36+
return (
37+
<>
38+
{renderActivity.call ? renderActivity(...args) : renderActivity}
39+
<small>
40+
{' '}
41+
Enhancer called {timesEnhancerCalled.get(activity.id)} times and handler called{' '}
42+
{timesHandlerCalled.get(activity.id)} times
43+
</small>
44+
</>
45+
);
46+
};
47+
};
3648
}
3749

3850
let shownCount = 0;
@@ -43,7 +55,13 @@
4355
promises.push(
4456
// Plain text message isolate dependencies on Markdown.
4557
directLine.emulateIncomingActivity(
46-
{ id: `activity-${shownCount + index}`, text: `Message ${shownCount + index}.`, textFormat: 'plain', type: 'message', timestamp },
58+
{
59+
id: `activity-${shownCount + index}`,
60+
text: `Message ${shownCount + index}.`,
61+
textFormat: 'plain',
62+
type: 'message',
63+
timestamp
64+
},
4765
{ skipWait: true }
4866
)
4967
);
@@ -54,53 +72,54 @@
5472
await pageConditions.numActivitiesShown(shownCount);
5573
}
5674

57-
run(
58-
async function () {
59-
const {
60-
WebChat: { ReactWebChat }
61-
} = window; // Imports in UMD fashion.
62-
63-
const { directLine, store } = testHelpers.createDirectLineEmulator();
64-
65-
WebChat.renderWebChat({ directLine, store, activityMiddleware: [activityRendered] }, document.querySelector('main'));
66-
67-
await pageConditions.uiConnected();
68-
pageElements.transcript().focus();
69-
70-
// WHEN: Adding 10 activities.
71-
await postMessagesBatch(directLine);
72-
await postMessagesBatch(directLine);
73-
74-
// THEN: Should not re-render activity more than twice.
75-
expect(Math.max(...timesActivityRendered.values())).toEqual(2);
76-
expect(Math.min(...timesActivityRendered.values())).toEqual(1);
77-
78-
// WHEN: Scroll and clicked on the 5th activity.
79-
const previousTimesActivityRendered = structuredClone(timesActivityRendered)
80-
pageElements.activities()[4].scrollIntoView();
81-
await host.clickAt(10, 10, pageElements.activities()[4]);
82-
83-
// THEN: Should focus on the activity.
84-
expect(pageElements.focusedActivity()).toEqual(pageElements.activities()[4]);
85-
86-
// THEN: Should not re-render.
87-
expect(timesActivityRendered).toEqual(previousTimesActivityRendered);
88-
89-
// WHEN: The 9th activity received an update.
90-
const timestamp = new Date().toISOString();
91-
const activity9Renders = timesActivityRendered.get('activity-8');
92-
await directLine.emulateIncomingActivity(
93-
{ id: `activity-8`, text: `Activity 8 got updated`, textFormat: 'plain', type: 'message', timestamp },
94-
{ skipWait: true }
95-
);
75+
run(async function () {
76+
const {
77+
WebChat: { ReactWebChat }
78+
} = window; // Imports in UMD fashion.
9679

97-
// THEN: Should re-render the 9th activity once.
98-
expect(timesActivityRendered.get('activity-8')).toBe(activity9Renders + 1);
99-
// THEN: Should render the updated 9th activity.
100-
pageElements.focusedActivity().scrollIntoView();
101-
await host.snapshot();
102-
}
103-
);
80+
const { directLine, store } = testHelpers.createDirectLineEmulator();
81+
82+
WebChat.renderWebChat(
83+
{ directLine, store, activityMiddleware: [activityRendered] },
84+
document.querySelector('main')
85+
);
86+
87+
await pageConditions.uiConnected();
88+
pageElements.transcript().focus();
89+
90+
// WHEN: Adding 10 activities.
91+
await postMessagesBatch(directLine);
92+
await postMessagesBatch(directLine);
93+
94+
// THEN: Should not re-render activity more than twice.
95+
expect(Math.max(...timesHandlerCalled.values())).toEqual(2);
96+
expect(Math.min(...timesHandlerCalled.values())).toEqual(1);
97+
98+
// WHEN: Scroll and clicked on the 5th activity.
99+
const previousTimesActivityRendered = structuredClone(timesHandlerCalled);
100+
pageElements.activities()[4].scrollIntoView();
101+
await host.clickAt(10, 10, pageElements.activities()[4]);
102+
103+
// THEN: Should focus on the activity.
104+
expect(pageElements.focusedActivity()).toEqual(pageElements.activities()[4]);
105+
106+
// THEN: Should not re-render.
107+
expect(timesHandlerCalled).toEqual(previousTimesActivityRendered);
108+
109+
// WHEN: The 9th activity received an update.
110+
const timestamp = new Date().toISOString();
111+
const activity9Renders = timesHandlerCalled.get('activity-8');
112+
await directLine.emulateIncomingActivity(
113+
{ id: `activity-8`, text: `Activity 8 got updated`, textFormat: 'plain', type: 'message', timestamp },
114+
{ skipWait: true }
115+
);
116+
117+
// THEN: Should re-render the 9th activity once.
118+
expect(timesHandlerCalled.get('activity-8')).toBe(activity9Renders + 1);
119+
// THEN: Should render the updated 9th activity.
120+
pageElements.focusedActivity().scrollIntoView();
121+
await host.snapshot();
122+
});
104123
</script>
105124
</body>
106125
</html>

0 commit comments

Comments
 (0)