fix(react-tooltip): use useIsomorphicLayoutEffect to avoid SSR warnings

change/@fluentui-eslint-plugin-71e8fb95-daf3-4bff-b5be-35a45e8b812e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "ban usage of React.useLayoutEffect as it produces warnings during SSR",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-6ac1731a-ed01-431f-830d-7b0eaad42c6c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "disable lint for valid usages",
+  "packageName": "@fluentui/react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-examples-057600a2-4f93-4877-8865-4fb998f06593.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "disable lint for valid usages",
+  "packageName": "@fluentui/react-examples",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-hooks-746af27f-3b93-4b31-9f1b-cd6a0dd2283a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "disable lint rules",
+  "packageName": "@fluentui/react-hooks",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabs-61a9271c-f9ba-4d41-bed5-a688fcec4111.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "disable lint rules",
+  "packageName": "@fluentui/react-tabs",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tooltip-872ef364-0f3d-48f1-82bc-9775354184d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "use useIsomorphicLayoutEffect to remove a warning during SSR",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-d3328862-b2cb-4ac1-b7b4-e2f763a29278.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "disable lint rules",
+  "packageName": "@fluentui/react-utilities",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/eslint-plugin/src/configs/react.js

@@ -95,10 +95,23 @@ const config = {
         message: `"${name}" refers to a DOM global. Did you mean to reference a local value instead?`,
       })),
     ],
+    '@fluentui/ban-imports': [
+      'error',
+      {
+        path: 'react',
+        names: ['useLayoutEffect'],
+        message: '`useLayoutEffect` causes a warning in SSR. Use `useIsomorphicLayoutEffect`',
+      },
+    ],
     'no-restricted-properties': [
       'error',
       { object: 'describe', property: 'only', message: 'describe.only should only be used during test development' },
       { object: 'it', property: 'only', message: 'it.only should only be used during test development' },
+      {
+        object: 'React',
+        property: 'useLayoutEffect',
+        message: '`useLayoutEffect` causes a warning in SSR. Use `useIsomorphicLayoutEffect`',
+      },
     ],
     'no-shadow': ['error', { hoist: 'all' }],
     'no-var': 'error',

packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx

@@ -29,6 +29,7 @@ const TooltipExampleCore = () => {
     { tooltip: React.useRef<TooltipImperativeHandle>(null), target: React.useRef<HTMLDivElement>(null) },
   ];
 
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     refs.forEach(ref => {
       if (ref.tooltip.current && ref.target.current) {

packages/react-hooks/README.md

@@ -208,7 +208,7 @@ const MyComponent = () => {
 });
 ```
 
-## useMountSync
+## useMountSync (deprecated)
 
 ```ts
 const useMountSync: (callback: () => void) => void;

packages/react-hooks/etc/react-hooks.api.md

@@ -75,7 +75,7 @@ export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObje
 // @public
 export const useMount: (callback: () => void) => void;
 
-// @public
+// @public @deprecated
 export const useMountSync: (callback: () => void) => void;
 
 // @public

packages/react-hooks/src/useMountSync.test.tsx

@@ -7,6 +7,7 @@ describe('useMountSync', () => {
     const onMount = jest.fn();
 
     const TestComponent: React.FunctionComponent = () => {
+      // eslint-disable-next-line deprecation/deprecation
       useMountSync(() => {
         onMount();
       });

packages/react-hooks/src/useMountSync.ts

@@ -1,17 +1,20 @@
 import * as React from 'react';
 
 /**
- *Hook which synchronously executes a callback once the component has been mounted.
+ * Hook which synchronously executes a callback once the component has been mounted.
  *
  * `WARNING` This should only be used if you need to perform an action after the component has been mounted and
  * before the browser paints. useMountSync will trigger debug warnings in server-rendered scenarios and should be used
  * sparingly.
  *
+ * @deprecated Consider to use React.useEffect() or React.useLayoutEffect() directly based on a use case
+ *
  * @param callback - Function to call once the component has been mounted.
  */
 export const useMountSync = (callback: () => void) => {
   const mountRef = React.useRef(callback);
   mountRef.current = callback;
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     mountRef.current?.();
   }, []);

packages/react-tabs/src/utilities/useOverflow.ts

@@ -75,6 +75,7 @@ export const useOverflow = ({ onOverflowItemsChanged, rtl, pinnedIndex }: Overfl
     return () => containerRef(null);
   });
 
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     const container = containerRef.current;
     const menuButton = menuButtonRef.current;

packages/react-tooltip/src/components/TooltipProvider/useTooltipProvider.ts

@@ -3,6 +3,7 @@ import { makeMergeProps, useMergedRefs } from '@fluentui/react-utilities';
 import { TooltipProviderProps, TooltipProviderState } from './TooltipProvider.types';
 import { useTooltipManager } from './useTooltipManager';
 import { useFluent } from '@fluentui/react-shared-contexts';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 
 const mergeProps = makeMergeProps<TooltipProviderState>();
 
@@ -45,7 +46,7 @@ export const useTooltipProvider = (
     props,
   );
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const root = state.ref.current;
     if (root && tooltipContainer) {
       root.appendChild(tooltipContainer);

packages/react-utilities/src/descendants/descendants.tsx

@@ -73,6 +73,7 @@ export function useDescendant<DescendantType extends Descendant>(
   });
 
   // Prevent any flashing
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     if (!descendant.element) {
       forceUpdate();

packages/react-utilities/src/hooks/useEventCallback.test.ts

@@ -47,6 +47,7 @@ describe('useEventCallback', () => {
     // Arrange
     const useTestHook = () => {
       const callback = useEventCallback(jest.fn());
+      // eslint-disable-next-line no-restricted-properties
       React.useLayoutEffect(() => callback(), [callback]);
     };
 

packages/react-utilities/src/hooks/useIsomorphicLayoutEffect.ts

@@ -10,4 +10,5 @@ import { isSSR } from '../utils/index';
  * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
  * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
  */
+// eslint-disable-next-line no-restricted-properties
 export const useIsomorphicLayoutEffect: typeof React.useEffect = isSSR() ? React.useEffect : React.useLayoutEffect;

packages/react/src/components/Image/Image.base.tsx

@@ -24,6 +24,7 @@ function useLoadState(
 
   const [loadState, setLoadState] = React.useState<ImageLoadState>(ImageLoadState.notLoaded);
 
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     // If the src property changes, reset the load state
     // (does nothing if the load state is already notLoaded)

packages/react/src/components/KeytipData/useKeytipData.ts

@@ -26,6 +26,7 @@ export function useKeytipData(options: KeytipDataOptions): IKeytipData {
   const prevOptions = usePrevious(options);
 
   // useLayoutEffect used to strictly emulate didUpdate/didMount behavior
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     if (
       uniqueId.current &&
@@ -36,6 +37,7 @@ export function useKeytipData(options: KeytipDataOptions): IKeytipData {
     }
   });
 
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     // Register Keytip in KeytipManager
     if (keytipProps) {

packages/react/src/components/Layer/Layer.base.tsx

@@ -93,6 +93,7 @@ export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<
       onLayerDidMount?.();
     };
 
+    // eslint-disable-next-line no-restricted-properties
     React.useLayoutEffect(() => {
       createLayerElement();
       // Check if the user provided a hostId prop and register the layer with the ID.

packages/react/src/components/TextField/MaskedTextField/MaskedTextField.tsx

@@ -344,6 +344,7 @@ export const MaskedTextField: React.FunctionComponent<IMaskedTextFieldProps> = R
   }, [mask, value]);
 
   // Run before browser paint to avoid flickering from selection reset.
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     // Move the cursor to position before paint.
     if (maskCursorPosition !== undefined && textField.current) {

packages/react/src/utilities/useOverflow.ts

@@ -75,6 +75,7 @@ export const useOverflow = ({ onOverflowItemsChanged, rtl, pinnedIndex }: Overfl
     return () => containerRef(null);
   });
 
+  // eslint-disable-next-line no-restricted-properties
   React.useLayoutEffect(() => {
     const container = containerRef.current;
     const menuButton = menuButtonRef.current;