How Do React Hooks Actually Work? React.js Deep Dive #3

In this video, we will learn how React Hooks actually work. We will do that by answering a number of questions about React Hooks. The first and most important question is Why do hooks rely on call order? (in other words Why can't they be called inside loops or conditions?). This has a lot to do with the fact that hooks are all about arrays and indexes. We will show this by reverse-engineering two of the most used React Hooks: useState and useEffect. The next question is Why isn't X a hook? The X in the question can be any hook proposition you can think of and the reason is that all React Hooks strictly follow 2 very important rules: composition and debugging. The last question we will answer is How does useState communicate with the renderer?

Timestamps:

0:00 Introduction
0:38 Why do React Hooks rely on call order?
0:53 Reverse-engineering useState hook
6:40 Reverse-engineering useEffect hook
10:42 Why isn't X a hook? (composition and debugging)
11:30 useBailout
12:59 How can useState be a part of rendering?

Social Media:

Music:

Creative Commons — Attribution 3.0 Unported — CC BY 3.0

Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0

Creative Commons — Attribution 3.0 Unported — CC BY 3.0

#ReactJS #ReactHooks #ReactDeepDive

[sanjeettiwari]

You just blew my mind with those useEffect and useState implementations. Great work, man.

[anasmostefaoui]

I've been looking on the react internal working in many resources, your content is the one that consolidate and visualize it greatly. great job! thanks a lot for all this hard work.

[wlockuz]

I just had a mind explosion moment when you showed the custom useState and useEffect hooks. It makes so much sense now why we can't use hooks anywhere but at the top level!

[Virtualexist]

This is Gold content. Learning react was getting very tasteless and like rote learning for me. This was very helpful to rekindle the interest.

[zm]

This series is exactly what I wanted. Beyond the beginner level and understand behind the sense. 😀

[jayt]

I did this very thing with useState so I reversed engineered it in my mind. I asked the same questions about the order and wondered how the counter could be incremented, and I concluded an array and global counter/index. Great work!

[bafellah]

It's exactly what I was looking for, Great work, thank you

[TischenkoPasha]

Thank you! Great professional job done with this videos, wish you all the best!

[SahraClayton]

This has just blew my mind, just when I thought I was just starting to understand react

[bishwajeetpandey]

Wow so much helpful, i really Love this type of video which tells how the thing work behind the scenes.

[BartekSpitza]

Amazing video. This was exactly what I was looking for, sadly I had to scroll several times as the top videos titled with “how react actually works” were all just shallow reiterations of the react API.. thank you!

[leolin]

This video is awesome. Looking forward to your new videos. Thanks!

[simpledeveloper]

Hi Philip, thank you (from Uzbekistan) very much for such great tutorial. appreciate your advanced videos.

[yasin]

Excellent video. I'm really impressed on the video's content quality

[tanercoder]

as promised this video is really a deep dive

[stanislautsishkou]

The most important content for thouse who switching from another framework!

[oykfwrl]

This is a bit complicated for a beginner ToT.... but super good video! thanks buddy!

[ottamindtrip]

thanks for this amazing video, it blew my mind

[cyberpsybin]

Excellent tutorial. Only doubt remains is as to why React team decided to go with Arrays and indexes to store hooks.
We could use objects and as long out component identifies correctly, hook can be retrieved reliably even if all hooks don't run.

[txwtvcq]

hello from Ukraine.N1ce video mate, thanks a lot!