Countries List With Debounce - Data Fetching

Debouncing is a method of preventing a function from being invoked too often, and instead of waiting a certain amount of time until it was last called before invoking it. A great example of where this is useful is an auto-completing input field that calls an API with the partial input to get a list of possible complete inputs.

User Stories

1. The page has an Input box that takes in user input
2. On every keystroke, the https://algochurn-server.onrender.com/practice/countries/:country API is called.
3. The API calls are debounced with a duration of 500 ms so that there are NO API calls on every keystroke - but after the user stops typing for ATLEAST 500ms, API calls are made.
4. The API returns a list of countries that match the user input.
5. The list of countries is displayed in the Dropdown
6. The user can select a country from the list and the Input box will be updated with the selected country

Sample API Request and Response

Request:

https://algochurn-server.onrender.com/practice/countries/ind

Response:

{
    countries: ["British Indian Ocean Territory", 
    "India",
    "Indonesia"
    ]
}