fix(motion): respect reduced motion in createMotionComponent() (#33357)

Author: layershifter

change/@fluentui-react-motion-80dc5fe2-1c39-41d8-921f-3e5d78554267.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: respect reduced motion in createMotionComponent()",
+  "packageName": "@fluentui/react-motion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion/library/src/contexts/MotionBehaviourContext.ts

@@ -6,5 +6,6 @@ import * as React from 'react';
 export type MotionBehaviourType = 'skip' | 'default';
 
 const MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);
+
 export const MotionBehaviourProvider = MotionBehaviourContext.Provider;
 export const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';

packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
 
 const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
 
@@ -12,7 +13,7 @@ export function useIsReducedMotion(): () => boolean {
   const queryValue = React.useRef<boolean>(false);
   const isEnabled = React.useCallback(() => queryValue.current, []);
 
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
       return;
     }