replace state with a ref

seek-oss · Nov 21, 2023 · 8b91070 · 8b91070
1 parent dfa0b75
commit 8b91070
Showing 1 changed file with 6 additions and 8 deletions.
diff --git 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}