1. 7
    Track Async Requests with React's useState Hook
    2m 23s

Track Async Requests with React's useState Hook

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

The useState Hook is the best way to track state in React. It's capabilities aren't limited to known values either. State can be set with asynchronously resolved values as well — like the result of a fetch request. Wrapped promises can be given to useState to communicate promise status for state transitions.

Instructor: [00:00] Now that our component is properly set up to fetch a Pokemon with an ID and communicate promise status to Suspense and error boundaries, let's add the ability to see the next Pokemon.

[00:14] To do that, we need a place to store our state. For that, there's no better place than React useState. As an initial state, I want to pass in our Pokemon, but we're going to have a naming collision here. As a pattern, I refer to this as initialPokemon and change the name up here as well.

[00:36] Now, I'm free to use the version that I get from useState as Pokemon, keeping everything in my component the same. It can't be additionally helpful to call this a resource and let Pokemon read that Pokemon resource only once.

[00:57] As I interpolate other values across this component, as it gets larger, I don't have to keep calling a read. It's cosmetic but it demonstrates how quickly these names become polluted against each other.

[01:11] We've got our initial Pokemon in state and we're using that state version of our Pokemon. We can set state by assigning this setPokemonResource function.

[01:24] Let's add a button. Button type = button and it'll have the text "Next." This is where the magic happens. On click, we want to set our Pokemon resource.

[01:43] What do we set it with? We can just fetch the next Pokemon. As long as we wrap it with our suspensify function, everything will work as we expect. Format, save and give it a try.

[01:59] When we press this again, we're going to keep getting Ivysaur because we've hardcoded this, too, in here. But we can pull that previous value off of our Pokemon state, Pokemon.ID+1.

[02:16] Now, as we click through, it will fetch a new Pokemon every time.

~ 2 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