React Hooks: Can't access updated useState variable - reactjs

Question

Issue: inputVal is a state variable that I update using setState.
It works fine when the button calls my handleConfirmSubmit function.
However, if I add that eventListener that listens for the keypress then triggers the function onKeyUp which then triggers handleConfirmSubmit... all of a sudden handleConfirmSubmit cannot see the updated state value.
I added the useEffect to console log out inputVal as I type, and I can confirm that it's updating, but for some reason, depending on where I invoke handleConfirmSubmit it either can or cannot see the updated state value.
CODE:
(Some unnecessary stuff has been stripped out)
export default function SingleInputModal(props){
const [cancelButton, setCancelButton] = useState(null);
const [inputVal, setInputVal] = useState(props.previousValue || '');
//ComponentDidMount
useEffect( () => {
//Listen for keypress
window.addEventListener('keyup', onKeyUp);
return () => {
window.removeEventListener('keyup', onKeyUp);
}
}, []);
useEffect( () => {
console.log('new inputval', inputVal);
},[inputVal])
const handleChange = (e) => {
console.log('handle Change ran', e.target.value);
setInputVal(e.target.value || '');
}
const handleConfirmSubmit = () => {
console.log('About to submit: ', inputVal);
props.handleConfirmation(false, inputVal)
}
const onKeyUp = (e) => {
if(props.submitOnEnter && e.key === 'Enter'){
//Submit
handleConfirmSubmit();
}
if(props.cancelOnESC && e.key === 'Escape'){
//Cancel
props.handleConfirmation(true, null);
}
}
return(
<div className="confirm"
>
<div className="modal singleInput"
>
<div className="content">
<input
className='myModal__textInput'
type='text'
value={inputVal}
onChange={handleChange}
/>
</div>
<div className="actions">
<a
onClick={handleConfirmSubmit}
>Submit</a>
</div>
</div>
</div>
)
}

Answer 1

You can update your listener when inputVal changes, otherwise the listener will store a copy of the value of inputVal from the first render.
useEffect( () => {
//Listen for keypress
window.addEventListener('keyup', onKeyUp);
return () => {
window.removeEventListener('keyup', onKeyUp);
}
}, [inputVal]);

Answer 2

You could use React.useCallback to make sure you have fresh versions of the functions (since e.g. handleConfirmSubmit can capture the inputVal in its closure):
export default function SingleInputModal(props) {
const [cancelButton, setCancelButton] = useState(null);
const [inputVal, setInputVal] = useState(props.previousValue || "");
useEffect(() => {
window.addEventListener("keyup", onKeyUp);
return () => window.removeEventListener("keyup", onKeyUp);
}, []);
useEffect(() => console.log("new inputval", inputVal), [inputVal]);
const handleChange = e => {
console.log("handle Change ran", e.target.value);
setInputVal(e.target.value || "");
};
const handleConfirmSubmit = React.useCallback(
() => {
console.log("About to submit: ", inputVal);
props.handleConfirmation(false, inputVal);
},
[inputVal],
);
const onKeyUp = React.useCallback(
e => {
if (props.submitOnEnter && e.key === "Enter") {
// Submit
return handleConfirmSubmit();
}
if (props.cancelOnESC && e.key === "Escape") {
// Cancel
props.handleConfirmation(true, null);
}
},
[handleConfirmSubmit, props.submitOnEnter, props.cancelOnESC],
);
return (
<div className="confirm">
<div className="modal singleInput">
<div className="content">
<input className="myModal__textInput" type="text" value={inputVal} onChange={handleChange} />
</div>
<div className="actions">
<a onClick={handleConfirmSubmit}>Submit</a>
</div>
</div>
</div>
);
}