I am currently dealing with a component that generates an input of type text for filtering an array containing over 4000 objects.
const { airports } = useContext(MainContext);
const [airportListLocal, setAirportListLocal] = useState<Airport[]>(airports);
useEffect(() => {
setAirportListLocal(airports);
}, []);
The airports variable holds a significantly large array of objects, retrieved initially through the useContext. To prevent altering the original airports array, I store it in the local state as (airportListLocal). However, I suspect this approach may be contributing to the performance issues.
<input
type="text"
name="From"
className="w-full border rounded-xl h-11 p-4 text-sm focus:border-blue-500 outline-none focus-border-2"
placeholder="Start your flight search"
onKeyDown={(e) => searchAirports(e)}
onChange={(e) => checkIfEmpty(e)}
/>
The onKeyDown function is utilized to detect when the user finishes typing and hits enter.
const searchAirports = (e: React.KeyboardEvent) => {
const searchValue = (e.target as HTMLInputElement).value.toLowerCase();
if (e.key === "Enter") {
const filteredAirports = airportListLocal.filter(
(airport) =>
airport.name.toLowerCase().includes(searchValue) ||
airport.country.toLowerCase().includes(searchValue) ||
airport.city.toLowerCase().includes(searchValue)
);
setAirportListLocal(filteredAirports);
}
};
The onChange function serves to determine if there is no input, indicating that the user hasn't typed anything or has deleted all entries to display all results.
const checkIfEmpty = (e: React.FormEvent) => {
if ((e.target as HTMLInputElement).value.length === 0) {
setAirportListLocal(airports);
}
};
To render the data, I map over the current state like so:
<div className="airports-list mt-8 search-results-airports h-28 overflow-y-scroll scroll">
{airportListLocal.map((airport) => (
<div key={airport.id} className="flex justify-between">
<p className="font-bold text-sm">{airport.country}</p>
<p className="text-xs">{airport.name}</p>
</div>
))}
</div>
Issue: The application's performance is extremely poor. It's unreasonably slow. Upon component mounting, Chrome even becomes unresponsive. Typing a single character in the input causes the app to freeze yet again.
I'm struggling to pinpoint the root cause of these performance woes. I'm unable to control the API providing the data, hence unable to fetch a paginated version. All data comes in a single load.
Any insights or suggestions?