fix(react-tabster): use useLayoutEffect() for Tabster creation (#34315)

Author: layershifter

change/@fluentui-react-tabster-c4068b76-08f7-4e2e-8824-563cce54c661.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix:  use useLayoutEffect() for Tabster creation",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabster/src/hooks/useTabster.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { getParent, usePrevious } from '@fluentui/react-utilities';
+import { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';
 
 interface WindowWithTabsterShadowDOMAPI extends Window {
   __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;
@@ -51,7 +51,7 @@ export function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {
   const { targetDocument } = useFluent();
   const factoryResultRef = React.useRef<FactoryResult | null>(null);
 
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const tabster = createTabsterWithConfig(targetDocument);
 
     if (tabster) {