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 web app using React Hooks, props and router-dom.

buchi• 60

@buchi-1996

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


please where can i learn prop drilling effectively and how to use context api in react.

Community feedback

Connor Z• 5,115

@zuolizhu

Posted

Hey @buchi,

Nice job on this challenge 🙌! prop drilling itself is not effective at all 😂, that's why people created state management tools for handling passing props crossing components.

However, if you want to stick with props and not introducing extra complex, you can do state lifting, 👉 official doc you can check it out. In your example, instead of fetching all the countries in your Country.jsx, you can fetching it in the upper components, which is your App.js component, and then passing down to other components.

Another tool you can try (and I highly recommended) is Zustand for global statement management, super easy to setup and works just fine 👌.

You can also use some tools like React Query or SWR, those tools have built in cache you can use, so instead of save the fetched data into state, save it as cache and use it in your components.

Hope my answer helps and happy coding 😆!

1

buchi• 60

@buchi-1996

Posted

@zuolizhu thanks I will look into your suggestions

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