setting up debounce

src/template/Sections.jsx

@@ -20,7 +20,14 @@ import '../styles/sections.css';
 
 
 const contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
-
+function debounce(callback, wait) {
+    let timeout;
+    return (...args) => {
+      const context = this;
+      clearTimeout(timeout);
+      timeout = setTimeout(() => callback.apply(context, args), wait);
+    };
+}
 
 export class Section1 extends React.Component {
     constructor(props) {
@@ -103,6 +110,7 @@ export function Section3() {
             }
         ],
         watch: true,
+        cacheTime: 4_000,
         onSuccess(data) {
             setBoomerPrice(data[0].toString());
             setBombPrice(data[1].toString());
@@ -151,7 +159,7 @@ export function Section3() {
                     <Slider className="slider" min={1} max={30} trackStyle={{
                         backgroundColor:'rgba(125, 46, 104, .8)', 
                         borderColor:'rgba(37, 19, 81, .8)'
-                    }} onChange={v => setBoomerAmount(v)} />
+                    }} onChange={v => debounce(setBoomerAmount(v), 500)} />
                 </div>
                 <div className="mintItem">
                     <h1>Assemble Bombs</h1>