How React Hooks Components Capture Values (And How To Use the Latest Values Instead)

Brett Cassette
InstructorBrett Cassette
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

When you first start with React Hooks, you'll likely encounter some head-scratching bugs because function components capture the values they're rendered with.

In this lesson, we see an example of such a bug by creating custom hook that wraps a WebSocket and exposes its messages array. We expect the array to contain all the messages, but it just contains the latest one.

The lesson will teach you:

  1. What value capturing means, and why it causes this bug
  2. How to use the "updater form" of the useState hook to update the array
  3. How to use the useRef hook to capture the values of the latest render in the callback
egghead
egghead
~ a minute 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