react hook can not clear input value - reactjs

Question

my component look like this
const onkeychange = async (e) => {
setState({ ...state, textValue: e.target.value })
if (delay !== false) {
clearTimeout(delay)
}
let string = e.target.value
if (string.trim() == '') {
setState({ ...state, issearching: false })
}
}
<input
type="text"
autoComplete="off"
name="search"
placeholder="Search for a Product, Brand or Category"
value={state.textValue}
className="search"
onChange={onkeychange}
/>
problem is, When after I type something in the input. Then try to delete everything, I can't I can delete all but one last character. For exmaple: I type hello in the input. trying to delete it with backspace, I can remove ello but not the h

Answer 1

You're checking if string === '' and case true you're setting the state using the old state which includes string's value just before deleting the last char, this is why you can't delete the last one. You should remove the condition
const onkeychange = async (e) => {
setState({ ...state, textValue: e.target.value })
if (delay !== false)
clearTimeout(delay)
}

Answer 2

Use functional form of setState to get the latest state when updating it. Also I'd recommend to consider using reducer hook here.
const onkeychange = async e => {
const value = e.target ? e.target.value : "";
setState(currentState => ({ ...currentState, textValue: value }));
if (delay !== false) {
clearTimeout(delay)
}
if (value.trim() === "") {
setState(currentState => ({ ...currentState, issearching: false }));
}
};

Answer 3

The setState is async, you can use a callback in the setState to get the correct preState to solve this problem.
const string = e.target.value;
setState((prevState) => {
return { ...prevState, textValue: string }
})
if (delay !== false) {
clearTimeout(delay)
}
if (string.trim() === '') {
setState((prevState) => {
return ({ ...prevState, isSearching: false })
})
}
or a more simple way is to only run setState once.
const string = e.target.value
if (delay !== false) {
clearTimeout(delay);
}
const isSearching = string.trim() !== "";
setState({ ...state, textValue: string, isSearching});
view demo on code sandbox