Debounce qrcode generator

Author: manhtai

src/components/md-to-html/MarkdownToHtml.tsx

@@ -5,7 +5,7 @@ import { ipcRenderer } from 'electron';
 
 const Md2Html = () => {
   const [md, setMd] = useState('# Hello\n> This is a quote');
-  const [preview, setPreview] = useState(false);
+  const [preview, setPreview] = useState(true);
   const [opening, setOpening] = useState(false);
 
   const handleChange = (evt: { target: { value: string } }) =>

src/components/qrcode/QrCode.tsx

@@ -1,23 +1,26 @@
 import { ipcRenderer } from 'electron';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import { useDebouncedEffect } from '../../helpers/effectHooks';
 
 const HtmlPreview = () => {
   const [content, setContent] = useState('https://plainbelt.github.io');
   const [qrCode, setQrCode] = useState();
   const [opening, setOpening] = useState(false);
   const [saving, setSaving] = useState(false);
 
-  useEffect(() => {
-    ipcRenderer
-      .invoke('generate-qrcode', { content })
-      .then((qr) => setQrCode(qr))
-      .catch(() => {});
-  });
+  useDebouncedEffect(
+    () => {
+      ipcRenderer
+        .invoke('generate-qrcode', { content })
+        .then((qr) => setQrCode(qr))
+        .catch(() => {});
+    },
+    [content],
+    500
+  );
 
   const handleChange = async (evt: { target: { value: string } }) => {
     setContent(evt.target.value);
-    const qr = await ipcRenderer.invoke('generate-qrcode', { content });
-    setQrCode(qr);
   };
 
   const handleOpen = async () => {
@@ -57,16 +60,16 @@ const HtmlPreview = () => {
           Save...
         </button>
       </div>
-      <div className="flex min-h-full">
+      <div className="flex flex-1 min-h-full">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full bg-white p-4"
+          className="flex-1 min-h-full bg-white p-4 rounded-md"
           value={content}
         />
         <div className="mx-1" />
         {qrCode && (
-          <section className="flex-1 min-h-full flex items-center p-4 prose bg-white">
-            <img src={qrCode} alt={content} className="w-full h-full" />
+          <section className="flex-1 min-h-full flex items-center p-4 prose bg-white rounded-md">
+            <img src={qrCode} alt={content} />
           </section>
         )}
       </div>

src/helpers/effectHooks.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useDebouncedEffect = (
+  effect: any,
+  deps: Array<any>,
+  delay: number
+) => {
+  useEffect(() => {
+    const handler = setTimeout(() => effect(), delay);
+
+    return () => clearTimeout(handler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...(deps || []), delay]);
+};
+
+export default { useDebouncedEffect };