feat(react-utilities): enhance useFirstMount hook to support React concurrent mode with useEffect for first mount tracking by dmytrokirpa · Pull Request #34985 · microsoft/fluentui

dmytrokirpa · 2025-08-06T16:42:22Z

Previous Behavior

The useFirstMount hook did not fully support React's concurrent mode, which led to timing issues with first mount tracking and caused the React 19 e2e integration tests to fail.

New Behavior

Enhanced useFirstMount hook to properly support React concurrent mode using useEffect for first mount tracking
Fixed failing React 19 integration e2e tests by updating Cypress test patterns from promise-based assertions to chained assertions to handle React 19's timing changes in concurrent mode

Related Issue(s)

Partially implements [Feature]: add react 19 support to react-components #34768

github-actions · 2025-08-06T16:47:59Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`108.347 kB` `33.133 kB`	`108.369 kB` `33.133 kB`	`22 B`
`react-charts` AreaChart	`378.178 kB` `114.99 kB`	`378.2 kB` `114.998 kB`	`22 B` `8 B`
`react-charts` DeclarativeChart	`625.615 kB` `178.476 kB`	`625.637 kB` `178.485 kB`	`22 B` `9 B`
`react-charts` DonutChart	`294.274 kB` `87.979 kB`	`294.296 kB` `87.988 kB`	`22 B` `9 B`
`react-charts` FunnelChart	`287.535 kB` `85.474 kB`	`287.557 kB` `85.485 kB`	`22 B` `11 B`
`react-charts` GanttChart	`362.362 kB` `108.866 kB`	`362.384 kB` `108.878 kB`	`22 B` `12 B`
`react-charts` GaugeChart	`310.651 kB` `92.021 kB`	`310.673 kB` `92.028 kB`	`22 B` `7 B`
`react-charts` GroupedVerticalBarChart	`363.192 kB` `108.895 kB`	`363.214 kB` `108.904 kB`	`22 B` `9 B`
`react-charts` HeatMapChart	`360.742 kB` `109.231 kB`	`360.764 kB` `109.231 kB`	`22 B`
`react-charts` HorizontalBarChart	`294.95 kB` `86.744 kB`	`294.972 kB` `86.746 kB`	`22 B` `2 B`
`react-charts` Legends	`234.737 kB` `69.425 kB`	`234.759 kB` `69.433 kB`	`22 B` `8 B`
`react-charts` LineChart	`384.024 kB` `115.585 kB`	`384.046 kB` `115.591 kB`	`22 B` `6 B`
`react-charts` ScatterChart	`363.285 kB` `109.075 kB`	`363.307 kB` `109.083 kB`	`22 B` `8 B`
`react-charts` VerticalBarChart	`401.797 kB` `115.615 kB`	`401.819 kB` `115.623 kB`	`22 B` `8 B`
`react-charts` VerticalStackedBarChart	`373.451 kB` `111.601 kB`	`373.473 kB` `111.612 kB`	`22 B` `11 B`
`react-combobox` Combobox (including child components)	`106.93 kB` `34.798 kB`	`106.952 kB` `34.798 kB`	`22 B`
`react-combobox` Dropdown (including child components)	`107.56 kB` `34.721 kB`	`107.582 kB` `34.719 kB`	`22 B` `-2 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`236.519 kB` `68.472 kB`	`236.541 kB` `68.47 kB`	`22 B` `-2 B`
`react-components` react-components: entire library	`1.278 MB` `321.584 kB`	`1.278 MB` `321.579 kB`	`22 B` `-5 B`
`react-dialog` Dialog (including children components)	`102.445 kB` `30.622 kB`	`102.467 kB` `30.624 kB`	`22 B` `2 B`
`react-menu` Menu (including children components)	`164.994 kB` `49.945 kB`	`165.016 kB` `49.946 kB`	`22 B` `1 B`
`react-menu` Menu (including selectable components)	`167.976 kB` `50.541 kB`	`167.998 kB` `50.542 kB`	`22 B` `1 B`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.628 kB` `2.36 kB`	`5.65 kB` `2.36 kB`	`22 B`
`react-overflow` hooks only	`12.832 kB` `4.828 kB`	`12.854 kB` `4.828 kB`	`22 B`
`react-tag-picker` @fluentui/react-tag-picker - package	`188.272 kB` `56.449 kB`	`188.294 kB` `56.452 kB`	`22 B` `3 B`
`react-timepicker-compat` TimePicker	`109.913 kB` `36.335 kB`	`109.935 kB` `36.335 kB`	`22 B`
`react-toast` Toast (including Toaster)	`103.458 kB` `30.97 kB`	`103.48 kB` `30.971 kB`	`22 B` `1 B`
`react-tree` FlatTree	`149.112 kB` `42.659 kB`	`149.134 kB` `42.662 kB`	`22 B` `3 B`
`react-tree` PersonaFlatTree	`149.868 kB` `42.777 kB`	`149.89 kB` `42.78 kB`	`22 B` `3 B`
`react-tree` PersonaTree	`146.125 kB` `41.639 kB`	`146.147 kB` `41.638 kB`	`22 B` `-1 B`
`react-tree` Tree	`145.375 kB` `41.503 kB`	`145.397 kB` `41.503 kB`	`22 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-avatar` Avatar	`48.518 kB` `15.508 kB`
`react-avatar` AvatarGroup	`19.235 kB` `7.617 kB`
`react-avatar` AvatarGroupItem	`62.662 kB` `19.727 kB`
`react-badge` Badge	`25.06 kB` `8.242 kB`
`react-badge` CounterBadge	`25.84 kB` `8.517 kB`
`react-badge` PresenceBadge	`24.929 kB` `9.147 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.212 kB` `31.517 kB`
`react-button` Button	`36.705 kB` `10.508 kB`
`react-button` CompoundButton	`43.117 kB` `11.812 kB`
`react-button` MenuButton	`41.6 kB` `11.902 kB`
`react-button` SplitButton	`49.667 kB` `13.477 kB`
`react-button` ToggleButton	`52.636 kB` `12.285 kB`
`react-calendar-compat` Calendar Compat	`149.762 kB` `39.933 kB`
`react-card` Card - All	`101.577 kB` `28.578 kB`
`react-card` Card	`94.223 kB` `26.749 kB`
`react-card` CardFooter	`13.662 kB` `5.517 kB`
`react-card` CardHeader	`16.195 kB` `6.38 kB`
`react-card` CardPreview	`13.729 kB` `5.645 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` SankeyChart	`198.471 kB` `60.992 kB`
`react-charts` Sparkline	`91.115 kB` `28.688 kB`
`react-checkbox` Checkbox	`34.335 kB` `11.786 kB`
`react-color-picker` ColorArea	`49.32 kB` `17.32 kB`
`react-color-picker` ColorPicker	`17.95 kB` `7.143 kB`
`react-color-picker` ColorSlider	`41.493 kB` `15.375 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`68.79 kB` `19.902 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.624 kB` `14.255 kB`
`react-datepicker-compat` DatePicker Compat	`226.614 kB` `64.087 kB`
`react-divider` Divider	`20.626 kB` `7.654 kB`
`react-field` Field	`22.657 kB` `8.602 kB`
`react-image` Image	`14.489 kB` `5.882 kB`
`react-input` Input	`27.148 kB` `9.108 kB`
`react-jsx-runtime` Classic Pragma	`1.101 kB` `550 B`
`react-jsx-runtime` JSX Dev Runtime	`2.8 kB` `1.251 kB`
`react-jsx-runtime` JSX Runtime	`3.422 kB` `1.493 kB`
`react-label` Label	`13.799 kB` `5.644 kB`
`react-link` Link	`16.746 kB` `6.785 kB`
`react-list` List	`88.892 kB` `26.38 kB`
`react-list` ListItem	`112.276 kB` `33.202 kB`
`react-message-bar` MessageBar (all components)	`24.088 kB` `8.96 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`3.995 kB` `1.755 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.727 kB` `823 B`
`react-persona` Persona	`55.409 kB` `17.389 kB`
`react-popover` Popover	`132.198 kB` `41.134 kB`
`react-portal` Portal	`15.411 kB` `5.385 kB`
`react-portal-compat` PortalCompatProvider	`8.386 kB` `2.624 kB`
`react-positioning` usePositioning	`28.865 kB` `10.146 kB`
`react-positioning` useSafeZoneArea	`12.29 kB` `4.967 kB`
`react-progress` ProgressBar	`16.593 kB` `6.613 kB`
`react-provider` FluentProvider	`23.8 kB` `8.556 kB`
`react-radio` Radio	`31.8 kB` `10.006 kB`
`react-radio` RadioGroup	`14.889 kB` `6.09 kB`
`react-select` Select	`26.95 kB` `9.833 kB`
`react-slider` Slider	`37.211 kB` `12.461 kB`
`react-spinbutton` SpinButton	`34.431 kB` `11.449 kB`
`react-spinner` Spinner	`24.374 kB` `8.192 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`106.039 kB` `30.537 kB`
`react-switch` Switch	`34.51 kB` `11.014 kB`
`react-table` DataGrid	`161.275 kB` `45.589 kB`
`react-table` Table (Primitives only)	`41.978 kB` `13.573 kB`
`react-table` Table as DataGrid	`131.476 kB` `36.341 kB`
`react-table` Table (Selection only)	`69.846 kB` `19.704 kB`
`react-table` Table (Sort only)	`68.489 kB` `19.321 kB`
`react-tags` InteractionTag	`14.561 kB` `5.865 kB`
`react-tags` Tag	`30.33 kB` `9.76 kB`
`react-tags` TagGroup	`83.089 kB` `24.555 kB`
`react-teaching-popover` TeachingPopover	`102.747 kB` `30.737 kB`
`react-text` Text - Default	`16.19 kB` `6.366 kB`
`react-text` Text - Wrappers	`19.35 kB` `6.695 kB`
`react-textarea` Textarea	`25.53 kB` `9.361 kB`
`react-tooltip` Tooltip	`57.853 kB` `20.037 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against c0aabdccb5c79620be68ec17d80c8454b541d1be}

github-actions · 2025-08-06T16:49:57Z

Pull request demo site: URL

packages/react-components/react-tabster/src/useKeyborgRef.cy.tsx

…ncurrent mode with setEffect for first mount tracking

…of realPress for better compatibility

packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx

Hotell

added few comments - nothing blocking though. LGTM

apps/react-17-tests-v9/cypress-react-17.config.ts

packages/react-components/react-tabster/src/useKeyborgRef.cy.tsx

packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx

dmytrokirpa self-assigned this Aug 6, 2025

dmytrokirpa added Component: Tree tabster React 19 labels Aug 6, 2025

github-actions bot reviewed Aug 6, 2025

View reviewed changes

packages/react-components/react-tabster/src/useKeyborgRef.cy.tsx Show resolved Hide resolved

dmytrokirpa mentioned this pull request Aug 6, 2025

fix(react-menu): prevent focusing trigger on first mount if menu has been opened previously #34966

Closed

github-actions bot added the CI label Aug 7, 2025

feat(react-utilities): enhance useFirstMount hook to support React co…

8fb7f0e

…ncurrent mode with setEffect for first mount tracking

dmytrokirpa force-pushed the tests/react19-integration-e2e-tests-fix branch from 17259ee to 8fb7f0e Compare August 7, 2025 08:40

github-actions bot removed the CI label Aug 7, 2025

dmytrokirpa changed the title ~~tests(react-tabster, react-tree): fix failing React 19 integration e2e tests~~ feat(react-utilities): enhance useFirstMount hook to support React concurrent mode with setEffect for first mount tracking Aug 7, 2025

dmytrokirpa marked this pull request as ready for review August 7, 2025 08:49

dmytrokirpa requested review from a team and marcosmoura as code owners August 7, 2025 08:49

Hotell self-requested a review August 7, 2025 12:03

dmytrokirpa changed the title ~~feat(react-utilities): enhance useFirstMount hook to support React concurrent mode with setEffect for first mount tracking~~ feat(react-utilities): enhance useFirstMount hook to support React concurrent mode with useEffect for first mount tracking Aug 7, 2025

layershifter approved these changes Aug 7, 2025

View reviewed changes

update Cypress configuration and FlatTree tests to use press instead …

56dd12b

…of realPress for better compatibility

dmytrokirpa requested a review from a team as a code owner August 8, 2025 12:36

Merge branch 'master' into tests/react19-integration-e2e-tests-fix

802239d

dmytrokirpa commented Aug 8, 2025

View reviewed changes

packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx Show resolved Hide resolved

Hotell approved these changes Aug 11, 2025

View reviewed changes

address review feedback

333ab4e

dmytrokirpa mentioned this pull request Aug 13, 2025

[Feature] Add a lint rule to disallow using then on cypress component tests APIs #35019

Open

dmytrokirpa added 3 commits August 13, 2025 16:12

Merge branch 'master' into tests/react19-integration-e2e-tests-fix

fca39e8

import base config support file

edc13f4

Merge branch 'master' into tests/react19-integration-e2e-tests-fix

24acbc0

dmytrokirpa merged commit ab6fb48 into microsoft:master Aug 15, 2025
15 checks passed

dmytrokirpa deleted the tests/react19-integration-e2e-tests-fix branch August 15, 2025 08:36

Hotell mentioned this pull request Aug 27, 2025

feat(cypress): make 'press' command work in cypress 13/react 17 and undo setup in r17-tests-v9 #35107

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-utilities): enhance useFirstMount hook to support React concurrent mode with useEffect for first mount tracking#34985

feat(react-utilities): enhance useFirstMount hook to support React concurrent mode with useEffect for first mount tracking#34985
dmytrokirpa merged 7 commits intomicrosoft:masterfrom
dmytrokirpa:tests/react19-integration-e2e-tests-fix

dmytrokirpa commented Aug 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

Uh oh!

Uh oh!

Hotell left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

dmytrokirpa commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

github-actions bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

Uh oh!

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dmytrokirpa commented Aug 6, 2025 •

edited

Loading

github-actions bot commented Aug 6, 2025 •

edited

Loading