I have created a typeahead using react. The issue is that, if i put something and type backspace, some previous results are showing.
I understood the reason is thar, Since the API call are async , its rendering some previous call results. So how we could we able to resolve this issue effectively ?
codeSandbox : https://codesandbox.io/p/sandbox/typeahead-3xrg9y
import React, { useEffect, useState } from "react";
import { fetchSuggestions } from "./API";
export default function Typeahead() {
const [searchQuery, setSearchQuery] = useState("");
const [results, setResults] = useState([]);
useEffect(() => {
if (!searchQuery) {
setResults([]);
return;
}
getResults(searchQuery);
}, [searchQuery]);
async function getResults(query) {
const result = await fetchSuggestions(query);
if (query === searchQuery) {
setResults(result);
}
}
function inputHandler(e) {
const query = e.target.value;
setSearchQuery(query);
}
return (
<div className="container">
<input onChange={inputHandler} value={searchQuery} />
<div>
<ul className="list-container">
{results.map((res) => (
<li>{res}</li>
))}
</ul>
<div />
</div>
</div>
);
}
2
Answers
If anyone gets into same situation, this issue can be resolved using useRef hook. To get the current value in the callback time, we will store the input in a ref as well. then compare the input with the ref instead of state value.
You just need to add some
debounce
for the input, using thesetTimeout
that resets every time the input changes and only makes a call to fetch suggestions after 300 ms ( you can change as needed ) of inactivityCODESANDBOX