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

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
This video is designed to get you familiar with Custom Hooks in React where we cover topics such:
👉 Where to find custom hooks made by other people (www.useHooks.com)
👉 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? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 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

Пікірлер: 80

  • @SonnySangha
    @SonnySangha Жыл бұрын

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @137dylan
    @137dylan2 жыл бұрын

    Hey Sonny...maybe it's time to start dropping some big TS projects - it's the future

  • @magdagozdalik1531
    @magdagozdalik15312 жыл бұрын

    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.

  • @davidasiamah2898
    @davidasiamah2898 Жыл бұрын

    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.🙌

  • @sharonthomas4010
    @sharonthomas4010 Жыл бұрын

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

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    My pleasure!! Thank you!

  • @cmefindaname
    @cmefindaname2 жыл бұрын

    Brilliantly explained and demonstrated! Thank you!

  • @amirmehrizi6045
    @amirmehrizi60452 жыл бұрын

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

  • @exoticcoder5365
    @exoticcoder5365 Жыл бұрын

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

  • @kushagra-aa
    @kushagra-aa2 жыл бұрын

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

  • @Arabian_Epileptic
    @Arabian_Epileptic2 жыл бұрын

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

  • @sahilkc23
    @sahilkc232 жыл бұрын

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

  • @abdikarimissa5428
    @abdikarimissa54282 жыл бұрын

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

  • @ask43242flight
    @ask43242flight8 ай бұрын

    very nice presentation. Thank you!

  • @reactversechannel
    @reactversechannel9 ай бұрын

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

  • @emmanuelmanana1527
    @emmanuelmanana15272 жыл бұрын

    on time on point always!!!

  • @alialavizadeh2775
    @alialavizadeh27752 жыл бұрын

    that was very good, awesome explanation on hooks

  • @govindbchandran8681
    @govindbchandran86812 жыл бұрын

    Nice. This was pretty informational actually

  • @danzo1956
    @danzo19562 жыл бұрын

    Simply perfect 100%

  • @syedalirazarizvi9653
    @syedalirazarizvi96532 жыл бұрын

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

  • @amrindraouk3440
    @amrindraouk34402 жыл бұрын

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

  • @vikasni95
    @vikasni952 жыл бұрын

    Very good & clean explanation

  • @abuhossain4274
    @abuhossain4274 Жыл бұрын

    nice and simple ! thanks

  • @phillyt22
    @phillyt22 Жыл бұрын

    You have a gift Sonny. Thanks you.

  • @hamidr8391
    @hamidr83912 жыл бұрын

    Helped alot

  • @homegadgetsreviews
    @homegadgetsreviews2 жыл бұрын

    Sonny is a really good instructor

  • @javadkhan5094
    @javadkhan50942 жыл бұрын

    Nice work sir

  • @traviaroad_7
    @traviaroad_72 жыл бұрын

    Awesome Explained

  • @harishg9429
    @harishg94292 жыл бұрын

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

  • @mohibkhan2492
    @mohibkhan24922 жыл бұрын

    Awesome video 100k soon!

  • @codenerd7823
    @codenerd78232 жыл бұрын

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

  • @surendrajat7290
    @surendrajat72908 ай бұрын

    next level video

  • @filip23128
    @filip231282 жыл бұрын

    Thanks!

  • @abdelrahmanelbeltagy3942
    @abdelrahmanelbeltagy3942 Жыл бұрын

    thanks bro...

  • @soja2897
    @soja2897 Жыл бұрын

    Nice tutorial

  • @NITHINPB
    @NITHINPB2 жыл бұрын

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

  • @amanjanwani1486
    @amanjanwani14862 жыл бұрын

    Yo AMAZING

  • @whycapetown
    @whycapetown Жыл бұрын

    Papa React coming in clutch! I'm working on a react native app project and I'm fetching data from an API but the problem is I'm trying to filter that data based on the category. Would I need to build a custom hook for that?

  • @preslavgetov1330

    @preslavgetov1330

    Жыл бұрын

    Are you going to be using this technique in more than one place? If not, I don't see the point.

  • @WhatsThisWhoa
    @WhatsThisWhoa11 ай бұрын

    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?

  • @ghcoder5477
    @ghcoder54772 жыл бұрын

    Awesome video

  • @feliwein_cc
    @feliwein_cc2 жыл бұрын

    pushing to 100k!

  • @ajeethkumarr6744
    @ajeethkumarr67442 жыл бұрын

    Hey sonny, may I know the multicolor drawing pen name which you guys using on the screen

  • @teflonhav
    @teflonhav Жыл бұрын

    thanks

  • @innovafrique
    @innovafrique2 жыл бұрын

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

  • @javalover7570
    @javalover75702 жыл бұрын

    Does setFirstName and setLastName in generateJoke functions rerender because of the state change once or twice ? I mean does joke called once or twice when generateJoke called ?

  • @sahilkc23

    @sahilkc23

    2 жыл бұрын

    Joke will only be invoked / called once we hit the generate function, where we are updating the state variables and once the state or props if any changes the component re-renders with the latest values on the UI.

  • @pawanbarnwal6239
    @pawanbarnwal62392 жыл бұрын

    Hey! Add some stuff for complex design with material ui

  • @patelkrupa3475
    @patelkrupa3475 Жыл бұрын

    Useeffect have empty dependency array then why it will run every time when button click ??

  • @ronananderson
    @ronananderson2 жыл бұрын

    I'm trying to build the slack clone using firebase, I get the error below. Anyone have the same issue? Thanks!! Attempted import error: 'getDoc' is not exported from 'firebase/firestore'.

  • @adnanahad
    @adnanahad2 жыл бұрын

    Please make separate video of Redux tutorial please please... 😊

  • @tahavirdiwala4881
    @tahavirdiwala48812 жыл бұрын

    Sonny could pls tell me that on Amazon clone you used firebase, does that firebase works on today's version?

  • @beastnighttv

    @beastnighttv

    2 жыл бұрын

    Nope

  • @Nuclearoscoop
    @Nuclearoscoop2 жыл бұрын

    Thank you Sonny for this fascinating video :) Just a quick question: When I hit the 'Generate Joke' button, it generates a new joke only once. How to fix this to enable multiple consecutive clicks ? Thanks.

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Thanks dude! Would need to see some code to help you out!

  • @Nuclearoscoop

    @Nuclearoscoop

    2 жыл бұрын

    @@SonnySangha Ok, I send you by private message the project uploaded in my git repo

  • @ShivamSingh-ic4kh

    @ShivamSingh-ic4kh

    2 жыл бұрын

    @@Nuclearoscoop what is your github link send me too

  • @kaan3045

    @kaan3045

    2 жыл бұрын

    @@Nuclearoscoop you got any answer ?

  • @afifzuhairr

    @afifzuhairr

    2 жыл бұрын

    you can try to custom a function to check if it is the same value of firstname and lastname to trigger the generate jokes. if it's the same then reset the hooks state.

  • @mehulsrivastava2799
    @mehulsrivastava2799 Жыл бұрын

    no one can teach better react than him

  • @shalihuddinfams1227
    @shalihuddinfams12272 жыл бұрын

    What if first name and last name unchanged when fire submit

  • @navalmalaviya6024
    @navalmalaviya60242 жыл бұрын

    Please make a tutorial on GIT also, please!!!

  • @eranilde7359
    @eranilde7359 Жыл бұрын

    It seems the api is down. Could anyone help with the current api...

  • @Susantha
    @Susantha2 жыл бұрын

    Coool

  • @gergelygrusz713
    @gergelygrusz7132 жыл бұрын

    I liked this, however, I don’t understand why you didn’t simply return the generate function from the custom hook so that you can generate multiple jokes with one set of names. I don’t think you would need refs either if you did so, and it would be cleaner code.

  • @chrisstucker1813
    @chrisstucker1813 Жыл бұрын

    Good tutorial but I can't access the joke API? I think it's been taken down.

  • @wenlongteo6272
    @wenlongteo62722 жыл бұрын

    Erm isnt this useRandomJoke hook is a simple function that return value?

  • @lifebest4404
    @lifebest44042 жыл бұрын

    Sir how to create classified ads mobile application flutter backund php

  • @handsome_man69
    @handsome_man692 жыл бұрын

    Handsome man

  • @dark9y8
    @dark9y82 жыл бұрын

    Bro, you like like Punjabi Indian, aren't you ?, Btw please keep making project based videos, and concept videos like this.

  • @aid.shorts
    @aid.shorts2 жыл бұрын

    Sunny bro please create a search application

  • @kaan3045
    @kaan30452 жыл бұрын

    what if we want to generate another jokes for the same name? when we don't change the name it doesn't change the state so i can't generate multiple jokes for 1 name

  • @kulvirsingh4568
    @kulvirsingh45682 жыл бұрын

    Sunny are u from punjab because sangha surname is punjabi

  • @dark9y8

    @dark9y8

    2 жыл бұрын

    He even looks like Indian as well.

  • @soniablanche5672
    @soniablanche5672 Жыл бұрын

    lol why are you using async with .then() instead of await

  • @lynnpelly2277
    @lynnpelly22772 жыл бұрын

    Please course of video calling and chat flutter 🙏

  • @swaubhikchakraborty5797
    @swaubhikchakraborty57972 жыл бұрын

    can you do google classroom

  • @MinhHoang-vx1dr
    @MinhHoang-vx1dr2 жыл бұрын

    Can you create a game ?

  • @SkyrimBeast
    @SkyrimBeast2 жыл бұрын

    Shame on me. I've been watching the React video's but I'm not sub'd. Sooooo sub'd, thanks for the video's Sonny

  • @drexxdrazzer29
    @drexxdrazzer292 жыл бұрын

    Since when did mo vlogs start a coding channel?