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.