From 8b91070cd49f13f7c4d1574784ae9863d244fcf8 Mon Sep 17 00:00:00 2001
From: Remus Mate <rmate@seek.com.au>
Date: Tue, 21 Nov 2023 12:25:34 +1100
Subject: [PATCH] replace state with a ref

---
 src/Playroom/Frames/Frames.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 42f7e548..5ce42a72 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import flatMap from 'lodash/flatMap';
 import Iframe from './Iframe';
 import { compileJsx } from '../../utils/compileJsx';
@@ -18,7 +18,7 @@ interface FramesProps {
 
 export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
-  const [renderCode, setRenderCode] = useState('');
+  const renderCode = useRef<string>('');
 
   const frames = flatMap(widths, (width) =>
     themes.map((theme) => ({
@@ -28,11 +28,9 @@ export default function Frames({ code, themes, widths }: FramesProps) {
     }))
   );
 
-  useEffect(() => {
-    try {
-      setRenderCode(compileJsx(code));
-    } catch (e) {}
-  }, [code]);
+  try {
+    renderCode.current = compileJsx(code);
+  } catch (e) {}
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
@@ -46,7 +44,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
             <Iframe
               intersectionRootRef={scrollingPanelRef}
               src={frameSrc(
-                { themeName: frame.theme, code: renderCode },
+                { themeName: frame.theme, code: renderCode.current },
                 playroomConfig
               )}
               className={styles.frame}