Bump v8 peer deps to support react 18 by micahgodbolt · Pull Request #24976 · microsoft/fluentui

micahgodbolt · 2022-09-27T17:22:00Z

To establish confidence that react will function properly, we have:

triaged all known issues for using react in React 18
created a test app (react-test-tests-v8) to test issues we've already fixed, and provide a platform for future triage and testing
Publishing a custom storybook release with current controls, rendered in React 18 + strict mode

codesandbox-ci · 2022-09-27T17:33:09Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 308fa21:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-09-27T17:34:03Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 0f664f4c653e15908e32731a937bbf62597c2147 (build)

fabricteam · 2022-09-27T17:35:07Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.827 kB` `17.599 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.375 kB` `52.561 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-progress` Progress	`11.66 kB` `4.619 kB`

_{🤖 This report was generated against 17096b3137d9d3e7c7443ddc3ce0738b2910a334}

fabricteam · 2022-09-27T18:03:54Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1184	1197	5000
Breadcrumb	mount	2947	2938	1000
Checkbox	mount	2658	2644	5000
CheckboxBase	mount	2363	2348	5000
ChoiceGroup	mount	4367	4383	5000
ComboBox	mount	1250	1250	1000
CommandBar	mount	9542	9545	1000
ContextualMenu	mount	10890	10994	1000
DefaultButton	mount	1375	1351	5000
DetailsRow	mount	3537	3618	5000
DetailsRowFast	mount	3593	3602	5000
DetailsRowNoStyles	mount	3468	3438	5000
Dialog	mount	3114	3085	1000
DocumentCardTitle	mount	571	568	1000
Dropdown	mount	3204	3218	5000
FocusTrapZone	mount	2015	1979	5000
FocusZone	mount	1953	1995	5000
GroupedList	mount	53148	59518	2
GroupedList	virtual-rerender	25344	24738	2
GroupedList	virtual-rerender-with-unmount	94839	93005	2
GroupedListV2	mount	570	558	2
GroupedListV2	virtual-rerender	526	517	2
GroupedListV2	virtual-rerender-with-unmount	568	566	2
IconButton	mount	1924	1902	5000
Label	mount	724	726	5000
Layer	mount	4303	4291	5000
Link	mount	831	834	5000
MenuButton	mount	1654	1681	5000
MessageBar	mount	2376	2328	5000
Nav	mount	3303	3261	1000
OverflowSet	mount	1359	1380	5000
Panel	mount	2520	2578	1000
Persona	mount	1262	1296	1000
Pivot	mount	1653	1628	1000
PrimaryButton	mount	1532	1508	5000
Rating	mount	7021	6988	5000
SearchBox	mount	1500	1507	5000
Shimmer	mount	2865	2919	5000
Slider	mount	2113	2082	5000
SpinButton	mount	4623	4692	5000
Spinner	mount	799	803	5000
SplitButton	mount	3131	3103	5000
Stack	mount	870	856	5000
StackWithIntrinsicChildren	mount	2327	2339	5000
StackWithTextChildren	mount	4818	4824	5000
SwatchColorPicker	mount	10533	10559	5000
TagPicker	mount	2643	2634	5000
TeachingBubble	mount	92593	90266	5000
Text	mount	791	820	5000
TextField	mount	1641	1604	5000
ThemeProvider	mount	1541	1534	5000
ThemeProvider	virtual-rerender	1097	1088	5000
ThemeProvider	virtual-rerender-with-unmount	2148	2159	5000
Toggle	mount	1119	1113	5000
buttonNative	mount	546	558	5000

fabricteam · 2022-10-06T22:30:35Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1324	1310	5000
Button	mount	950	945	5000
FluentProvider	mount	1574	1608	5000
FluentProviderWithTheme	mount	642	627	10
FluentProviderWithTheme	virtual-rerender	592	613	10
FluentProviderWithTheme	virtual-rerender-with-unmount	636	643	10
MakeStyles	mount	1921	1909	50000
SpinButton	mount	2603	2543	5000

micahgodbolt · 2022-10-06T22:36:26Z

packages/react-components/react-persona/MIGRATION.md

 - `componentRef` => NOT SUPPORTED - use `ref` instead
 - `hidePersonaDetails` => Use the `Avatar` component for this case
 - ```
+


post commit linting added this

micahgodbolt · 2022-10-06T22:36:34Z

packages/react-components/react-progress/src/components/Progress/Progress.types.ts

  /**
   * A decimal number between `0` and `1` (or between `0` and `max` if given),
-   * which specifies how much of the task has been completed. 
+   * which specifies how much of the task has been completed.


post commit linting added this

change/@fluentui-react-persona-1132a852-8617-49d5-b3d6-c2afd4597ba6.json

change/@fluentui-react-progress-d2f5b5dc-e2a3-47c1-8a64-38ad980964e3.json

…uentui into bump-v8-react-18

khmakoto

Should we have any documentation about special things you need to do so the components work correctly in React 18?

sopranopillow · 2022-10-07T19:28:05Z

Should we have any documentation about special things you need to do so the components work correctly in React 18?

@micahgodbolt I think the idea is not to have to do anything, right? You should just be able to bump up to R18.

micahgodbolt · 2022-10-11T15:03:59Z

Should we have any documentation about special things you need to do so the components work correctly in React 18?

As long as you aren't running your React 18 app inside of a yarn v1 mono repo that uses React 17 by default, ya should be good :D

Controls are working out of the box.

* chore: Bump v8 packages peer deps to include React 18 * change files * baseline * change files * Apply suggestions from code review * removing added packages * remove bad change file * put change file back

micahgodbolt added 2 commits September 27, 2022 10:17

chore: Bump v8 packages peer deps to include React 18

be1b550

change files

b735dd7

msft-fluent-ui-bot assigned tomi-msft Sep 27, 2022

github-actions bot added this to the September Project Cycle Q1 2022 milestone Sep 27, 2022

conflicts

b22e94a

github-actions bot modified the milestones: September Project Cycle Q1 2022, October Project Cycle Q4 2022 Oct 6, 2022

merge conflict

aada9a2

micahgodbolt added 2 commits October 6, 2022 15:34

baseline

9d2445b

change files

563a940

micahgodbolt commented Oct 6, 2022

View reviewed changes

change/@fluentui-react-persona-1132a852-8617-49d5-b3d6-c2afd4597ba6.json Outdated Show resolved Hide resolved

micahgodbolt commented Oct 6, 2022

View reviewed changes

change/@fluentui-react-progress-d2f5b5dc-e2a3-47c1-8a64-38ad980964e3.json Outdated Show resolved Hide resolved

micahgodbolt and others added 3 commits October 6, 2022 15:37

Apply suggestions from code review

4c8f67e

removing added packages

b9613bd

Merge branch 'bump-v8-react-18' of https://github.com/micahgodbolt/fl…

385a8a7

…uentui into bump-v8-react-18

micahgodbolt marked this pull request as ready for review October 6, 2022 23:07

micahgodbolt requested review from a team, sopranopillow and tomi-msft as code owners October 6, 2022 23:07

micahgodbolt requested a review from khmakoto as a code owner October 6, 2022 23:07

khmakoto reviewed Oct 7, 2022

View reviewed changes

sopranopillow approved these changes Oct 7, 2022

View reviewed changes

conniec218 approved these changes Oct 10, 2022

View reviewed changes

AtishayMsft approved these changes Oct 11, 2022

View reviewed changes

Merge branch 'master' into bump-v8-react-18

05a47d5

spmonahan approved these changes Oct 11, 2022

View reviewed changes

khmakoto approved these changes Oct 11, 2022

View reviewed changes

micahgodbolt added 2 commits October 13, 2022 11:19

conflicts

49290bf

conflict

72e9acd

micahgodbolt enabled auto-merge (squash) October 13, 2022 18:22

remove bad change file

f070a00

micahgodbolt closed this Oct 13, 2022

auto-merge was automatically disabled October 13, 2022 18:27
Pull request was closed

micahgodbolt reopened this Oct 13, 2022

micahgodbolt added 2 commits October 13, 2022 11:29

put change file back

05a0f3a

Merge branch 'master' into bump-v8-react-18

308fa21

micahgodbolt enabled auto-merge (squash) October 13, 2022 19:11

micahgodbolt merged commit 82650ef into microsoft:master Oct 13, 2022

micahgodbolt deleted the bump-v8-react-18 branch October 13, 2022 20:04

micahgodbolt mentioned this pull request Oct 18, 2022

chore: Update the remaining react packages to use React 18 #25278

Merged

spmonahan mentioned this pull request Oct 18, 2022

[Bug]: Webpack fails with export 'useInsertionEffect' (imported as 'React') was not found in 'react in React 17 app #25283

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump v8 peer deps to support react 18#24976

Bump v8 peer deps to support react 18#24976
micahgodbolt merged 15 commits intomicrosoft:masterfrom
micahgodbolt:bump-v8-react-18

micahgodbolt commented Sep 27, 2022

Uh oh!

codesandbox-ci bot commented Sep 27, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Sep 27, 2022 •

edited

Loading

Uh oh!

fabricteam commented Sep 27, 2022 •

edited

Loading

Uh oh!

fabricteam commented Sep 27, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 6, 2022 •

edited

Loading

Uh oh!

micahgodbolt Oct 6, 2022

Uh oh!

micahgodbolt Oct 6, 2022

Uh oh!

Uh oh!

Uh oh!

khmakoto left a comment

Uh oh!

sopranopillow commented Oct 7, 2022 •

edited

Loading

Uh oh!

micahgodbolt commented Oct 11, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Conversation

micahgodbolt commented Sep 27, 2022

Uh oh!

codesandbox-ci bot commented Sep 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Sep 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Sep 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Sep 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Oct 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

micahgodbolt Oct 6, 2022

Choose a reason for hiding this comment

Uh oh!

micahgodbolt Oct 6, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

khmakoto left a comment

Choose a reason for hiding this comment

Uh oh!

sopranopillow commented Oct 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

micahgodbolt commented Oct 11, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

codesandbox-ci bot commented Sep 27, 2022 •

edited

Loading

size-auditor bot commented Sep 27, 2022 •

edited

Loading

fabricteam commented Sep 27, 2022 •

edited

Loading

fabricteam commented Sep 27, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Oct 6, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

sopranopillow commented Oct 7, 2022 •

edited

Loading