set Debounced data from API in React

Photo by ev on Unsplash

We can take advantage of using API to fetch the data recently as a web developer. But did you notice if we fetch the data, normally the data will send back when the event executes, such as typing a letter, aww, we actually want to execute the fetching action when we stop typing?

The fixed method is set a timer with debounced data between the API and actually fetched data. Give it a breath!

workflow

The image above shows the workflow of the data fetching process. Just like adding another layer of stored data container, it’s easier to handle the data as you wish.

Here is the example for fetching the Google translation API:

First, set the debouncedText and setDebouncedText with React useState()

const [debouncedText, setDebouncedText] = useState(text);

When we first request the data from API, we store the data in “debouncedText”.

useEffect(() => {
const doTranslation = async () => {
const { data } = await axios.post(
“https://translation.googleapis.com/language/translate/v2",