From 0ee781cbb5981b0eb2da646cf839e6234b8f7c58 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 4 Oct 2023 17:39:14 +0300
Subject: [PATCH 1/2] fix(react-motion): sync internal value of canRender with
 presence

---
 ...otion-preview-9ee2031a-5268-4dd5-8f34-060e985b7d22.json | 7 +++++++
 .../react-motion-preview/src/hooks/useMotion.ts            | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-motion-preview-9ee2031a-5268-4dd5-8f34-060e985b7d22.json

diff --git a/change/@fluentui-react-motion-preview-9ee2031a-5268-4dd5-8f34-060e985b7d22.json b/change/@fluentui-react-motion-preview-9ee2031a-5268-4dd5-8f34-060e985b7d22.json
new file mode 100644
index 00000000000000..ea0aa729caa843
--- /dev/null
+++ b/change/@fluentui-react-motion-preview-9ee2031a-5268-4dd5-8f34-060e985b7d22.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: sync internal value of canRender with presence",
+  "packageName": "@fluentui/react-motion-preview",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-motion-preview/src/hooks/useMotion.ts b/packages/react-components/react-motion-preview/src/hooks/useMotion.ts
index 76e903866f6b4f..0a5db898a9b3bc 100644
--- a/packages/react-components/react-motion-preview/src/hooks/useMotion.ts
+++ b/packages/react-components/react-motion-preview/src/hooks/useMotion.ts
@@ -177,11 +177,11 @@ function useMotionPresence<Element extends HTMLElement>(
       ref,
       type,
       active,
-      canRender: type !== 'unmounted',
+      canRender: presence || type !== 'unmounted',
     }),
     // No need to add ref to the deps array as it is stable
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [active, type],
+    [active, type, presence],
   );
 }
 

From 6a52555a85246c223840399e17007f8ec9e942d6 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 5 Oct 2023 14:23:57 +0300
Subject: [PATCH 2/2] test: add unit test to cover the change

---
 .../react-motion-preview/src/hooks/useMotion.test.ts     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts b/packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts
index 2a8f39a7e45058..946bf69a713e54 100644
--- a/packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts
+++ b/packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts
@@ -64,6 +64,15 @@ describe('useMotion', () => {
   });
 
   describe('when motion is received', () => {
+    it('should sync presence value with canRender', () => {
+      const { result, rerender } = renderHookWithRef(false);
+
+      expect(result.current.canRender).toBe(false);
+      rerender(true);
+
+      expect(result.current.canRender).toBe(true);
+    });
+
     it('should return default values when presence is false', () => {
       const defaultState = getDefaultMotionState();
       const { result } = renderHookWithRef(getDefaultMotionState());