Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Aug 6, 2025

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)

Copy link

github-actions bot commented Aug 6, 2025

📊 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.14 kB
114.991 kB
378.162 kB
114.999 kB
22 B
8 B
react-charts
DeclarativeChart
616.084 kB
175.227 kB
616.106 kB
175.238 kB
22 B
11 B
react-charts
DonutChart
294.276 kB
87.979 kB
294.298 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.438 kB
108.908 kB
362.46 kB
108.92 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.116 kB
108.89 kB
363.138 kB
108.898 kB
22 B
8 B
react-charts
HeatMapChart
360.704 kB
109.24 kB
360.726 kB
109.24 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
381.698 kB
115.037 kB
381.72 kB
115.045 kB
22 B
8 B
react-charts
ScatterChart
363.247 kB
109.083 kB
363.269 kB
109.091 kB
22 B
8 B
react-charts
VerticalBarChart
401.759 kB
115.624 kB
401.781 kB
115.628 kB
22 B
4 B
react-charts
VerticalStackedBarChart
372.058 kB
111.179 kB
372.08 kB
111.189 kB
22 B
10 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.566 kB
1.278 MB
321.562 kB
22 B
-4 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.217 kB
45.579 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 26c011620005a58f38fc2d5e63e030a5c661e6b1

Copy link

github-actions bot commented Aug 6, 2025

Pull request demo site: URL

…ncurrent mode with setEffect for first mount tracking
@dmytrokirpa dmytrokirpa force-pushed the tests/react19-integration-e2e-tests-fix branch from 17259ee to 8fb7f0e Compare August 7, 2025 08:40
@github-actions github-actions bot removed the CI label Aug 7, 2025
@dmytrokirpa 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 dmytrokirpa marked this pull request as ready for review August 7, 2025 08:49
@dmytrokirpa dmytrokirpa requested review from marcosmoura and a team as code owners August 7, 2025 08:49
@Hotell Hotell self-requested a review August 7, 2025 12:03
@dmytrokirpa 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
@dmytrokirpa dmytrokirpa requested a review from a team as a code owner August 8, 2025 12:36
@@ -203,9 +204,9 @@ describe('FlatTree', () => {
</TreeTest>,
);
cy.focused().should('not.exist');
cy.document().realPress('Tab');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

realPress supports React 17 and 18, but not 19.
press is compatible with React 18 and 19.

So, I use press and provide a fallback for press in Cypress 13, since it is not available there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants