Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@dgdev1024

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

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

@rfilenko

Posted

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

Have a good one, Roman

0

@dgdev1024

Posted

@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
Discord logo

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