Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Separate API Utility Functions from React Components

    reactReact
    ^0.0.0-experimental-b53ea6ca0

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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

    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.