Responsive & Reactive Rest Countries API w/ React & ReactRouterDOM
Design comparison
Solution retrospective
Let's dive deep into this one and tell me improvements I can make!
I used fuse.js for fuzzy search (although I would love to implement my own), react-router-dom for routing, which is probably overkill since I can use search parameters and rerender the page.
I thought about just using the data fetched from the homepage for the details of a country using the ReactRouterDOM hook named "useRouteLoaderData", and I am not sure if that's better since we would need to filter the results, thus consuming more memory.
At this level, it's not really necessary to think about memory, but I strive more performant web apps. Also, what do you think about the will-change CSS declaration? With the amount of <a> tags I have since we need to navigate to a different page by clicking on a country card, it consumes more memory based on the warning by Mozilla.
Also, I tried a different approach with listening to the changes in Input and Select elements, which I think was unnecessary, but my idea was that we can have different components listen to their value change. But of course, prop drilling or useContext can be used for that.
This was a pretty cool experience!
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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