From ee754727e295e22bef7b9fe776e77406b06af284 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Thu, 26 May 2022 18:37:10 +0100
Subject: [PATCH] [Beta] Fix editor re-renders on lint error (#4699)

---
 beta/src/components/MDX/Sandpack/Preview.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 17c86fab..2b33f4e0 100644
--- 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.