1. 6
    Separate API Utility Functions from React Components
    1m 15s

Separate API Utility Functions from React Components

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ 8 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today