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

apps/react-17-tests-v9/config/support/commands.js

@@ -0,0 +1,7 @@
+import { realPress } from 'cypress-real-events/commands/realPress';
+
+/**
+ * Press command fallback for Cypress 13 compatibility.
+ * The press command is available in Cypress 14+ but not in Cypress 13.
+ */
+Cypress.Commands.add('press', realPress);

apps/react-17-tests-v9/config/support/component.js

@@ -0,0 +1,2 @@
+import 'cypress-real-events';
+import './commands';

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

@@ -13,7 +13,13 @@ const specs = [
   path.resolve('../../packages/react-components/react-tabster/src/**/*.cy.{tsx,ts}'),
   ...excludedSpecs,
 ];
-const config = { ...baseConfig };
+const config = {
+  ...baseConfig,
+  component: {
+    ...baseConfig.component,
+    supportFile: path.resolve(__dirname, 'config/support/component.js'),
+  },
+};
 
 config.component.specPattern = specs;
 config.component.devServer.webpackConfig.resolve ??= {};

change/@fluentui-react-utilities-649e1127-b2c6-4503-861d-4c57f42bf7ad.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enhance hook to support React concurrent mode using setEffect for first mount tracking",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.cy.tsx

@@ -43,7 +43,7 @@ describe('DrawerFooter', () => {
 
     cy.get('#drawer-body').scrollTo('center');
     cy.get('#drawer-footer').within($el => {
-      cy.window().then(win => {
+      cy.window().should(win => {
         const before = win.getComputedStyle($el[0], '::before');
         const opacity = before.getPropertyValue('opacity');
 

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

@@ -23,12 +23,12 @@ describe('Keyborg', () => {
 
   it('should dispose keyborg instance on unmount', () => {
     mount(<Example />);
-    cy.window().then(win => {
+    cy.window().should(win => {
       // @ts-expect-error - Only way to definitively check if keyborg is disposed
       expect(win.__keyborg).not.equals(undefined);
     });
     mount(<div>Unmounted</div>);
-    cy.window().then(win => {
+    cy.window().should(win => {
       // @ts-expect-error - Only way to definitively check if keyborg is disposed
       expect(win.__keyborg).equals(undefined);
     });

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

@@ -1,3 +1,4 @@
+import 'cypress-real-events';
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
@@ -203,9 +204,9 @@ describe('FlatTree', () => {
         </TreeTest>,
       );
       cy.focused().should('not.exist');
-      cy.document().realPress('Tab');
+      cy.document().press('Tab');
       cy.get('[data-testid="item1"]').should('be.focused');
-      cy.document().realPress('Tab');
+      cy.document().press('Tab');
       cy.get('#action').should('be.focused');
     });
     describe('navigationMode="treegrid"', () => {
@@ -241,9 +242,9 @@ describe('FlatTree', () => {
         </TreeTest>,
       );
       cy.focused().should('not.exist');
-      cy.document().realPress('Tab');
+      cy.document().press('Tab');
       cy.get('[data-testid="item1"]').should('be.focused');
-      cy.document().realPress('Tab');
+      cy.document().press('Tab');
       cy.get('#action').should('be.focused').realPress('{enter}');
       cy.get('[data-testid="item1__item1"]').should('not.exist');
       cy.get('#action').should('be.focused').realPress('Space');
@@ -252,23 +253,23 @@ describe('FlatTree', () => {
     it('should focus on first item when pressing tab key', () => {
       mount(<TreeTest />);
       cy.focused().should('not.exist');
-      cy.document().realPress('Tab');
+      cy.document().press('Tab');
       cy.get('[data-testid="item1"]').should('be.focused');
     });
     it('should focus out of tree when pressing tab key inside tree.', () => {
       mount(<TreeTest />);
       cy.focused().should('not.exist');
-      cy.document().realPress('Tab');
+      cy.document().press('Tab');
       cy.get('[data-testid="item1"]').should('be.focused');
-      cy.focused().realPress('Tab');
+      cy.focused().press('Tab');
       cy.focused().should('not.exist');
     });
     describe('Navigation', () => {
       it('should move with Up/Down keys', () => {
         mount(<TreeTest />);
         cy.get('[data-testid="item1"]').focus().realPress('{downarrow}');
         cy.get('[data-testid="item2"]').should('be.focused');
-        cy.focused().realPress('Tab').should('not.exist');
+        cy.focused().press('Tab').should('not.exist');
       });
       describe('navigationMode="treegrid"', () => {
         it('should move with Up/Down keys', () => {
@@ -434,7 +435,7 @@ describe('FlatTree', () => {
           defaultCheckedItems={['item1__item1']}
         />,
       );
-      cy.window().then(win => {
+      cy.window().should(win => {
         expect(win.console.error).to.be.called;
       });
     });

packages/react-components/react-utilities/src/hooks/useFirstMount.ts

@@ -3,21 +3,20 @@ import * as React from 'react';
 /**
  * @internal
  * Checks if components was mounted the first time.
- * Since concurrent mode will be released in the future this needs to be verified
- * Currently (React 17) will always render the initial mount once
- * https://codesandbox.io/s/heuristic-brook-s4w0q?file=/src/App.jsx
- * https://codesandbox.io/s/holy-grass-8nieu?file=/src/App.jsx
+ * Supports React concurrent/strict mode by using `useEffect`
+ * to track the first mount instead of mutating refs during render.
  *
  * @example
  * const isFirstMount = useFirstMount();
  */
 export function useFirstMount(): boolean {
   const isFirst = React.useRef(true);
 
-  if (isFirst.current) {
-    isFirst.current = false;
-    return true;
-  }
+  React.useEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false;
+    }
+  }, []);
 
   return isFirst.current;
 }