Debouncing and Setting text data not happening at the same time - reactjs

Question

I am trying to use the debounce feature as well as the ability to retain the value of textbox that I typed but it's not happening for some reason. If I comment out setMyval(e.target.value); on line #20 then the debounce works without any issue but the value I type does not show up. Whereas if I uncomment it, then the value shows in the textbox but debounce feature does not work (meaning there are multiple console logs). Please if someone can tell me why is this happening and how can I make it work, it would help me.
Below is my reactjs code:
// App.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import debounce from "./debounce";
function App() {
const [myval, setMyval] = useState("");
const handleChange = debounce(() => {
console.log("This log msg should be debounced");
}, 2000);
return (
<div className="App">
<input
type="text"
value={myval}
onChange={e => {
setMyval(e.target.value);
handleChange(e.target.value);
}}
/>
<button onClick={() => setMyval("my new value")}>Change Value</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
// debounce.js
export default function debounce(fn, wait) {
let timer;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}
Code at https://codesandbox.io/s/affectionate-wind-0ef3y
What I expect:
If I type a word in the textbox, the value should remain in the textbox.
Debounce should work i.e. few console logs should appear.
If I click on the "Change Value" button, it should update the value "my new value" in the textbox.

Answer 1

https://codesandbox.io/s/sharp-turing-w4hu9
Your debounce doesnt work, because your debounce function gets redeclared on every component update. Use useCallback to keep the reference the same and avoid reinitialization
import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import debounce from "./debounce";
import "./styles.css";
function App() {
const [myval, setMyval] = useState("");
const handleChange = useCallback(debounce(() => {
console.log("This log msg should be debounced");
}, 2000), []);
return (
<div className="App">
<input
type="text"
value={myval}
onChange={e => {
setMyval(e.target.value);
handleChange(e.target.value);
}}
/>
<button onClick={() => setMyval("my new value")}>Change Value</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);