From 4cd75050432ed3a22ae36bf23e4ff000f018f5ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?=
 <59940332+patrycjakalinska@users.noreply.github.com>
Date: Tue, 28 May 2024 11:42:03 +0200
Subject: [PATCH] Add safer refresh on InteractiveExample (#6057)

Before when page was loading, there was a chance that `width` value
wouldn't be passed to component in `InteractiveComponent` - in other
words the `width` will be passed to component before it had become
something other than `null`, and there won't be a rerender after width
gets a number value. After this change, with `useEffect` hook, we
monitor if width has changed and if so, we trigger a rerender that
guarantees our component will always get correct width.
---
 docs/src/components/InteractiveExample/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/src/components/InteractiveExample/index.tsx b/docs/src/components/InteractiveExample/index.tsx
index 2469d917861..cca23f61afe 100644
--- a/docs/src/components/InteractiveExample/index.tsx
+++ b/docs/src/components/InteractiveExample/index.tsx
@@ -109,6 +109,12 @@ export default function InteractiveExample({
     }
   }, [interactiveExampleRef.current]);
 
+  React.useEffect(() => {
+    if (width !== null) {
+      setKey(key + 1);
+    }
+  }, [width]);
+
   const prefersReducedMotion = useReducedMotion();
 
   return (