Challenge Completed | ReactJS

[GomezTu]

**Responses: **

A) Describe the strategy used to consume the API endpoints and the data management.

For API consumption, I used the native web browser fetch.
As for data management, once obtained the data it's simply stored in the app's internal state.

B) Explain which library was used for the routing and why. Would you use the same for a consumer facing app targeting thousands of users? Why?

react-router / react-router-dom was used for the routing, mainly because it comes as a built in with create-react-app. Yes, most likely I'd use it for a consumer facing app since it's the most integrated solution for react-routing, and the easiest/fastest to use.

C) Have you used any strategy to optimize the performance of the list generated for the first feature?

The first approach that came to mind was to use an infinite scroller, however, that would of required to either have an API Enpoint that allows pagination OR to wrap the API provided with a custom one that paginates the results ... not worth it since there are other workarounds.

So, basically, what I did was to spawn a SAGA that fetchs the detail of the cocktail the moment it's about to be rendered/visible on the user's screen
This way no unnecesary requests are triggered (i.e: looking for the detail of a cocktail that's not shown).

D) Would you like to add any further comments or observations?

Nope, nothing else comes to mind right now, besides that I've added some tests here and there, trying to cover different things to test (helper functions/utils, components, snapshots, selectors, etc) instead of covering every single thing since this is a challenge.
In case anything else comes to mind later, I'll just edit this message.

👋 🚶 🚶 🚶