use debounced effect

Author: maxchistt

client/src/App.js

@@ -9,6 +9,7 @@ import ModalCardEdit from './Cards/ModalCardEdit'
 import ModalLogin from './Login/ModalLogin'
 import DataService from './Services/DataService'
 import Card, { checkCardsArr } from './Cards/cardType/Card'
+import useDebouncedEffect from './Shared/useDebouncedEffect'
 
 const { loadData, postData, updDataServLogin } = DataService()
 
@@ -58,7 +59,7 @@ function App() {
   const [updaterVal] = useUpdater()
 
   React.useEffect(loadDataFromServer, [logged, userName, updaterVal]) // eslint-disable-line react-hooks/exhaustive-deps
-  React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
+  useDebouncedEffect(loadDataToServer, [cardsArr], 1200) // eslint-disable-line react-hooks/exhaustive-deps
   React.useEffect(clearOldData, [logged]) // eslint-disable-line react-hooks/exhaustive-deps
 
   ///////////

client/src/Cards/ModalCardEdit.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import Context from '../context'
 import TextareaAutosize from 'react-textarea-autosize'
 import Modal, { ModalProps } from "../Shared/Modal/Modal"
-import debounce from '../Shared/debounce'
 import Card, { PropTypeCard } from './cardType/Card'
 import Palette from './palette/palette'
 
@@ -32,7 +31,6 @@ function ModalCardEdit({ card = new Card(), index }) {
     modalProps.sideClose = true
     modalProps.onSideClick = unsetEditCard
 
-
     function open() {
         setShowForm(true)
     }
@@ -47,7 +45,7 @@ function ModalCardEdit({ card = new Card(), index }) {
         editCardContent(index, name, text)
     }
 
-    function onInputCange(e) {
+    function onInputChange(e) {
         let name = card.name
         let text = card.text
         if (e.target.id === "modal-edit-name") name = e.target.value
@@ -82,7 +80,7 @@ function ModalCardEdit({ card = new Card(), index }) {
                                 maxRows={3}
                                 maxLength="100"
                                 value={card.name}
-                                onChange={debounce(onInputCange, 700)}
+                                onChange={onInputChange}
                             />
 
                             <p style={{ fontWeight: "500" }} className="mb-2 text-dark">
@@ -99,7 +97,7 @@ function ModalCardEdit({ card = new Card(), index }) {
                                 minRows={3}
                                 maxRows={calcMaxRows()}
                                 value={card.text}
-                                onChange={debounce(onInputCange, 1000)}
+                                onChange={onInputChange}
                             />
                         </React.Fragment>
                     ) : (

client/src/Shared/debounce.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(
+        () => {
+
+            const handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+
+
+            return () => {
+                clearTimeout(handler);
+            };
+        },
+
+        [delay, value]
+    );
+
+    return debouncedValue;
+}
+
+export default function useDebouncedEffect(func, deps, delay) {
+    const debounced = useDebounce(deps, delay || 0)
+    const debDepsList = Array.isArray(debounced) ? debounced : debounced ? [debounced] : undefined
+    useEffect(func, debDepsList) // eslint-disable-line react-hooks/exhaustive-deps
+}