Skip to content
Submitted over 4 years ago

REST Countries API - React.JS, React Router, Debouncing Input

Dennis Griffin•1,320
@dgdev1024
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

This one uses React Router to switch between the home and country pages, and Axios to fetch the countries from the API. Have a look at the search box, which features a debouncer which pulls from the API 500 ms after the last input. Hope you like it!

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hey, nice work, how is debouncer helping here? 😉 Thanks

    Have a good one, Roman

    0
    Dennis Griffin•1,320
    @dgdev1024Posted over 4 years ago

    @rfilenko The debouncer consists of a 'useEffect' hook which lists the search input and region select option as dependencies. The hook sets a timeout which pulls from the API 500 ms after the last input into the search box or change in the selected region. The timeout is cleared when either input changes. Don't have to hit Enter to get your results. :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord