[Beta] Fix editor re-renders on lint error (#4699)

reactjs · May 26, 2022 · ee75472 · ee75472
1 parent c209465
commit ee75472
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -61,16 +61,23 @@ export function Preview({
     rawError = null;
   }
 
-  if (lintErrors.length > 0) {
-    if (rawError == null || rawError.title === 'Runtime Exception') {
-      // When there's a lint error, show it -- even over a runtime error.
-      // (However, when there's a build error, we keep showing the build one.)
+  // Memoized because it's fed to debouncing.
+  const firstLintError = React.useMemo(() => {
+    if (lintErrors.length === 0) {
+      return null;
+    } else {
       const {line, column, message} = lintErrors[0];
-      rawError = {
+      return {
         title: 'Lint Error',
         message: `${line}:${column} - ${message}`,
       };
     }
+  }, [lintErrors]);
+
+  if (rawError == null || rawError.title === 'Runtime Exception') {
+    if (firstLintError !== null) {
+      rawError = firstLintError;
+    }
   }
 
   // It changes too fast, causing flicker.