fix(Renderer): fix timely re-renders (#39)

Author: simonguo

__tests__/ErrorBoundary-test.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render } from '@testing-library/react';
 import ErrorBoundary from '../src/ErrorBoundary';
 

__tests__/Preview-test.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render } from '@testing-library/react';
 import Preview from '../src/Preview';
 

__tests__/Renderer-test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Renderer from '../src/Renderer';
+
+it('refault is rendering', () => {
+  const { container } = render(<Renderer />);
+  expect(container.querySelector('.rcv-render')).toHaveTextContent('Rendering...');
+});
+
+it('should render a test div', () => {
+  const { container } = render(<Renderer code="ReactDOM.render(<div>test</div>)" />);
+
+  expect(container.querySelector('.rcv-render')).toContainHTML('<div>test</div>');
+});

src/Renderer.tsx

@@ -82,7 +82,6 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
   } = editor;
 
   const [editable, setEditable] = useState(isEditable);
-  const [hasError, setHasError] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
   const [compiledReactNode, setCompiledReactNode] = useState(null);
 
@@ -91,7 +90,6 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
   }, [editable]);
 
   const handleError = useCallback(error => {
-    setHasError(true);
     setErrorMessage(error.message);
   }, []);
 
@@ -123,7 +121,7 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
           });
         }
       } catch (err) {
-        console.error(err);
+        console.warn(err);
       } finally {
         // Reset the render function to the original value.
         ReactDOM.render = originalRender;
@@ -138,11 +136,9 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
 
   const handleCodeChange = useCallback(
     (code?: string) => {
-      setHasError(false);
-      setErrorMessage(null);
       onChange?.(code);
-
       executeCode(code);
+      setErrorMessage(null);
     },
     [executeCode, onChange]
   );
@@ -164,6 +160,7 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
   );
 
   const showCodeEditor = editable && code;
+  const hasError = !!errorMessage;
 
   return (
     <div className="rcv-container" {...rest} ref={ref}>