React Hooks: A Complete Introduction

React Hooks is an exciting new feature in the world of React.

Check out the blog post too!

It finally makes it possible to add state to a Function Component...something I've been wanting for a long time and I'm so glad is finally here.

This guide will walk you through:
- Why Hooks?
- Should I be worried? (No!)
- What are Hooks?
- How do I use Hooks?
- How do I use useState? useEffect?

Source code

As Codesandbox

Follow me!

[OurPastSecrets]

Dude just found your videos on react and as someone who loved react but hasn’t touched it in three years they are so helpful to get up to date. Thanks

[EricBishard]

Love the videos, I'm actually doing a talk on Hooks next week, I just ran across your videos and you make some good points that I didn't think about. Excellent channel man~!

[bartoszk]

Hooks feel much cleaner than classes. Looking forward for 16.7 and like always great video Harry! :-)

[renanrollo]

I'm new to React and read a lot about hook but with your explanation it was perfect. Thanks!

[JigMain]

Just started getting into hooks (i know i am a bit late) and i must say this was a really great explanation. Nicely done mate

[samtoya]

Thank you so much for this Harry... I now completely understand both hooks. :)

[Sarahchamorro]

This is the best video introducing Hooks I've found so far!

[DedicatedManagers]

At 10:15 you don’t pass a function to your incrementCount. But in the setExpanded you did pass a function. Could setExpanded have done just the same as you did with incrementCount?
setExpanded(!expanded)

[tedremmets]

The atom is split, ladies and gentlemen. We've found the electron of programming.

[foatei]

Docs says that clean-up function of useEffect is called not before re-render, but "before the component is removed from the UI". That's a pretty big difference. Who is wrong?

[ncphillips]

I totally disagree about useEffect.

1. useEffect does not remove the need to understand the React life cycle methods all, it just hides them
2. Unlike useEffect, it's obvious when the lifecycle class methods will get called...it says so in their names
3. the rendering function is no longer a pure. It now contains a bunch of inline lamdas that *sometimes* get called
4. Nothing about the useEffect's API is self explanatory. Without you telling me, I have no idea when the returned function gets called, or why some random array effects when different functions are called

As the API stands, this feels like a step in the Ruby-direction of overly magical code that's way too hard to reason about :(

[WalterKimaro]

0:24 I did the exact pointing motion and laugh at the exact time, got a nice little 'jinx' moment

[andriiauziak]

React and videos about react are becoming so convenient and understandable, so I start to believe that even such dumb as$ as me could learn this stuff

[richie-bonilla]

Great video & explanation. Subscribed. Thank you

[MarreLirre]

Damn, you seem really hooked on this new feature!

[EricBishard]

Are you planning on doing a video with the other hooks? I think useContext, useReducer and useRef would be good topics!

[albertilagan]

Why did you not use setExpanded(!expanded)?

[RuneJeppesen]

Thank you - now I understand it a bit more (though not 100% yet;)

[JAdamMoore]

Practice makes perfect. Keep making videos and you'll find ways of making the production quality higher; eliminate cruft, etc. Good job, I liked the video. For educational videos, maybe research NatGeo and PBS videos for tips and tricks on production methods/outcomes. Also, other successful tutorial channels have winning online strategies that you could stand to copy outright.

[MrGarkin]

`useContext` is neat
`useState` is kinda meh
but `useEffect` shit is seriously ugly