Skip to content

Mitigate chat re-rerenders in callwithchat composite#4301

Merged
JamesBurnside merged 6 commits intomainfrom
jaburnsi/mitigate-chat-rerenders
Mar 19, 2024
Merged

Mitigate chat re-rerenders in callwithchat composite#4301
JamesBurnside merged 6 commits intomainfrom
jaburnsi/mitigate-chat-rerenders

Conversation

@JamesBurnside
Copy link
Copy Markdown
Member

What

Ensure theme is memoized when it is merged

Why

  • Theme not being memoized cause useTheme to always return a new value
  • This in turn caused the CallWithChatComposite's chat side pane renderer to be recreated:
    image

Extra Notes

This is a needed fix but only a mitigation to the problem. The underlying problem is that whenever any of these dependencies change in the onRenderChatContent memoization, it causes the entire chat composite to unmount and then remount. It shouldn't do this. It should trigger a re-render, but react should correctly reconcile that this is not a new component, but the same as the old component but with new props. Because react is not reconciling the new anonymous function with the existing one, it replaces the entire react component (causing unmount of the existing chat composite and remount of a new chat composite). Why this is happening is still under investigation but this change is a net good change regardless.

Bug this is mitigating for more information: https://skype.visualstudio.com/SPOOL/_workitems/edit/3557255

How Tested

Locally verified the re-rerenders aren't triggering in the repro scenario.

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 19, 2024

CallWithChat bundle size is increased❗.

  • Current size: 5985569
  • Base size: 5985532
  • Diff size: 37

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 19, 2024

Chat bundle size is increased❗.

  • Current size: 1918988
  • Base size: 1918951
  • Diff size: 37

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 19, 2024

Calling bundle size is increased❗.

  • Current size: 4791724
  • Base size: 4791686
  • Diff size: 38

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 19, 2024

@azure/communication-react jest test coverage for beta.

Lines Statements Functions Branches
Base 47923 / 77227
62.05%
47923 / 77227
62.05%
987 / 2194
44.98%
2744 / 4505
60.91%
Current 47974 / 77229
62.11%
47974 / 77229
62.11%
987 / 2194
44.98%
2760 / 4516
61.11%
Diff 51 / 2
0.06%
51 / 2
0.06%
0 / 0
0%
16 / 11
0.2%

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 19, 2024

@azure/communication-react jest test coverage for stable.

Lines Statements Functions Branches
Base 23408 / 36280
64.52%
23408 / 36280
64.52%
643 / 1120
57.41%
1881 / 2965
63.44%
Current 23410 / 36282
64.52%
23410 / 36282
64.52%
643 / 1120
57.41%
1882 / 2966
63.45%
Diff 2 / 2
0%
2 / 2
0%
0 / 0
0%
1 / 1
0.01%

let fluentV8Theme: Theme = mergeThemes(defaultTheme, fluentTheme);
fluentV8Theme = mergeThemes(fluentV8Theme, { rtl });
const fluentV8Theme = useMemo(() => {
const mergedTheme = mergeThemes(defaultTheme, fluentTheme);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch!

@JamesBurnside JamesBurnside enabled auto-merge (squash) March 19, 2024 22:13
@github-actions
Copy link
Copy Markdown
Contributor

@JamesBurnside JamesBurnside merged commit aa041b6 into main Mar 19, 2024
@JamesBurnside JamesBurnside deleted the jaburnsi/mitigate-chat-rerenders branch March 19, 2024 22:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants