fix(react-drawer): update scroll state when children changes (#32818)

change/@fluentui-react-drawer-6bf581dd-1ead-41a7-8f5c-1e543da04967.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update scroll state when children changes",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts

@@ -18,7 +18,7 @@ import type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';
  *
  * Get the current scroll state of the DrawerBody.
  *
- * @param param0 - HTMLElement to check scroll state of
+ * @param element - HTMLElement to check scroll state of
  */
 const getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {
   if (scrollHeight <= clientHeight) {
@@ -51,26 +51,29 @@ export const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HT
   const scrollRef = React.useRef<HTMLDivElement | null>(null);
   const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
 
-  const onScroll = React.useCallback(() => {
-    cancelAnimationFrame();
-    setAnimationFrame(() => {
-      if (!scrollRef.current) {
-        return;
-      }
-
-      setScrollState(getScrollState(scrollRef.current));
-    });
-  }, [cancelAnimationFrame, setAnimationFrame, setScrollState]);
-
-  useIsomorphicLayoutEffect(() => {
+  const updateScrollState = React.useCallback(() => {
     if (!scrollRef.current) {
       return;
     }
 
     setScrollState(getScrollState(scrollRef.current));
+  }, [setScrollState]);
+
+  const onScroll = React.useCallback(() => {
+    cancelAnimationFrame();
+    setAnimationFrame(() => updateScrollState());
+  }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);
+
+  useIsomorphicLayoutEffect(() => {
+    updateScrollState();
+    /* update scroll state when children changes */
+  }, [props.children, updateScrollState]);
+
+  useIsomorphicLayoutEffect(() => {
+    updateScrollState();
 
     return () => cancelAnimationFrame();
-  }, [cancelAnimationFrame, setScrollState]);
+  }, [cancelAnimationFrame, updateScrollState]);
 
   return {
     components: {