Learn how to create Custom Hooks in React in 24 minutes (+ useRef Tutorial for beginners)

This video is designed to get you familiar with Custom Hooks in React where we cover topics such:
👉 Using a “Joke Generator” example
👉 Writing an async function to fetch data from an API
👉 Using a useEffect Hook and refactoring it to a custom hook
👉 How to use a useRef and incorporating it into the custom hook

🔴 LOOKING FOR THE CODE? 🛠️

👇🏻FOLLOW ME HERE:

💰 WANT TO SUPPORT THE CHANNEL?

🕐 TIMESTAMPS:
00:00 Intro
00:51 Skillshare Sponsorship
02:25 Introduction to Custom Hooks
02:57 Joke Generator App Example
04:21 Fetching the Joke data in a useEffect
06:01 Building the JSON Response
07:35 Storing the Response in the Component State
08:42 Building the Custom useRandomJoke Hook
12:12 Passing name as an argument in the Custom Hook
13:43 Testing our Custom Hook
14:52 Adding input fields in the Joke Generator App
17:05 Building the generateJoke Button Function
18:32 Creating the useRef Hook
22:15 Testing the Joke Generator App
22:48 Summary
23:23 Outro

Let’s get it PAPAFAM 🔥.

#reactjs #hooks #useref

[magdagozdalik]

You are the first person who explained in such an easy way when and why I need to pass variables in a dependency array. Thank you.

[davidasiamah]

What can I say, man, I love your tutorials, especially the ones that you go straight to it. Your explanations are clear and simple. Thank you.🙌

[cmefindaname]

Brilliantly explained and demonstrated! Thank you!

[amirmehrizi]

it was pretty straightforward thing I have ever seen about custom hooks and ref. big like bro

[Arabian_Epileptic]

Always good to hear from sonny
100k sub special make it a good one 😍
Can’t wait for that next 5 day challenge 💪🏼🔥🍿

[exoticcoder]

This is super helpful, easy to understand in a minute, Thank you Sonny

[sharonthomas]

You are the talking documentation of React, I could binge watch this all day. Demystifying React be like this, thank you so much!!

[sahilkc]

Very well explained, i loved it, you should also do a video on react optimisation

[kushagra-aa]

I was looking for useRerf tutorail and after not getting any on this channel I found this👌greaT

[abdikarimissa]

Amazing tutorial. I started bein having love with React is. Thank you

[govindbchandran]

Nice. This was pretty informational actually

[alialavizadeh]

that was very good, awesome explanation on hooks

[YourTechWhiz]

Hey Sonny! Great tutorial ❤️.
One question 🙋‍♂️ Can we use Debouching in this case instead of useRef hook?

[reactversechannel]

useRef was fun ! Sonny you are best. Make this comment pinned so that sonny can see

[amrindraouk]

I have learned another trick. Thank you Mr. Sonny.

[harishg]

Now i know why I need to pass variables in a dependency array, thank you

[WhatsThisWhoa]

Wouldn't the 'generateJoke' function call invoke two state re-renders, causing two async fetch's since both 'firstName' and 'lastName' were iin the dependency array on the 'useRandomJoke' custom hook?

[NITHINPB]

Your videos are amazing.
I am waiting for lucid chart/google draw clone.

[codenerd]

If revolution in Teaching had a face, that's surely gonna be this webcam
Love from India

[innovafrique]

Please tell me witch tools doyou use to make this awesome video.