Separate API Utility Functions from React Components
Separating concerns can improve code re-use. Keeping API functions separate from components can be a nice way to isolate concerns with the data layer and make data fetching functions available to other modules.
Instructor: [00:00] A component that can only fetch one Pokémon is not very interesting. Let's extract this fetch into another API function that would allow us to make this dynamic.
[00:11] We'll take this entire line and move it into a new function, fetchPokemon. This function will take an ID as an argument. We'll define that here, fetchPokemon, ID, and return our fetch request. Format that up, save.
[00:30] Everything works beautifully, but all this API code is starting to clutter up this component file. Let's remove it into its own file, which we'll call API. Paste what we had before, and export both of these functions as named exports
[00:51] Now we can refer to both of them by name inside of our PokemonDetail component. Import fetchPokemon and suspensify from API. As your application grows, keeping these clean boundaries between components and APIs is a maintenance habit that you want to repeat regularly.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!