From 44e548448d88c179b449819ee8a31d79f14c33ab Mon Sep 17 00:00:00 2001
From: "lalitkushwah.dev" <lalitkushwah.dev@gmail.com>
Date: Sat, 9 Oct 2021 11:51:01 +0530
Subject: [PATCH] optimize code editor component

---
 src/components/CodeEditor.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/CodeEditor.js b/src/components/CodeEditor.js
index 76cdd90..5893b21 100644
--- a/src/components/CodeEditor.js
+++ b/src/components/CodeEditor.js
@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Col, Row, Card, Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
@@ -15,14 +15,14 @@ export default (props) => {
   const [copied, setCopied] = useState(false);
   const noInline = code.includes('render(');
 
-  const handleCodeChange = (newCode) => {
+  const handleCodeChange = useCallback((newCode) => {
     setCode(newCode);
-  };
+  }, [setCode]);
 
-  const handleCopy = () => {
+  const handleCopy = useCallback(() => {
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
-  };
+  }, [setCopied]);
 
   return (
     <LiveProvider noInline={noInline} code={code} language={language} theme={themeStyle} scope={scope}>
@@ -34,11 +34,11 @@ export default (props) => {
             </Card.Body>
           </Card>
         </Col>
-        {imports ? (
+        {imports && (
           <Col xs={12} className="mb-4">
             <Code code={imports} />
           </Col>
-        ) : null}
+        )}
         <Col xs={12} className="mb-4">
           <LiveError className="alert alert-danger" />
 
@@ -54,7 +54,7 @@ export default (props) => {
 
               <LiveEditor onChange={handleCodeChange} className="live-editor" />
 
-              {copied ? <span className="text-success copy-code-text">Copied</span> : null}
+              {copied && <span className="text-success copy-code-text">Copied</span>}
 
               <OverlayTrigger
                 trigger={['hover', 'focus']}