0
303
ViewsReact JS setTimeout gets executed multiple times
Hi everyone I'm new to React JS and I got stuck into a problem that cant figure out what is the cause. So I'm trying to make a search field component that only trigger an API call after a user is done typing. What happened is that after the search is keyed in setTimeout gets executed multiple times. I'm afraid this would make multiple unnecessary api call. Would very much appriciae your help. Thank you!
main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<App />
)
App.tsx
import { useState } from 'react'
import fetchData from './utils/fetch'
import { WeatherModel } from './model/Weather'
function SearchField() {
let timer = 0
const [city, setCity] = useState('New York')
const handleFetchWeather = async () => {
const data: WeatherModel = await fetchData(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${WEATHER_API_KEY}&units=metric`)
console.log(data)
}
const handleSetCity = (e) => {
if(timer) clearTimeout(timer)
setCity(e.target.value)
timer = setTimeout(() => {
console.log(city)
// handleFetchWeather()
}, 2000)
}
return (
<div className="search">
<input type="text" placeholder="Search city..." onChange={handleSetCity} />
</div>
)
}
export default SearchField
Muliple console logs after search is keyed in
3 answers
Answer question0
You can use Debounce:
Here's an example :
useEffect(() => {
let debounce;
if (debounce) {
clearTimeout(debounce);
debounce = null;
}
debounce = setTimeout(() => {
// DO SOMETHING AFTER TIMEOUT ENDS
setSearchEntry(searchValue);
}, 1 * 1000);
}, [setSearchEntry, searchValue]);
Good luck :)
0
I would agree with the debounce solution, but also if you didn't know it, this code might be even simpler for you, so each time a component rerenders, the timer is set with 0 again, so in order to persist the value, imagine you need to put it in a state, just like this:
import { useState } from "react";
function SearchField() {
const [city, setCity] = useState("New York");
const [timer, setTimer] = useState(0);
const handleFetchWeather = async () => {
const data = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${WEATHER_API_KEY}&units=metric`
);
console.log(data);
};
const handleSetCity = (e) => {
if (timer) {
clearTimeout(timer);
}
setCity(e.target.value);
setTimer(
setTimeout(() => {
console.log(city);
// handleFetchWeather()
}, 2000)
);
};
return (
<div className="search">
<input
type="text"
placeholder="Search city..."
onChange={handleSetCity}
/>
</div>
);
}
export default SearchField;
Now, every rerender, the component will remember the previous value of it ;)