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

Рет қаралды 56,857

Күн бұрын

🚨 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 Жыл бұрын

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

@magdagozdalik1531 2 жыл бұрын

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.

@137dylan 2 жыл бұрын

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

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

@cmefindaname 2 жыл бұрын

Brilliantly explained and demonstrated! Thank you!

@exoticcoder5365 Жыл бұрын

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

@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 Жыл бұрын

My pleasure!! Thank you!

@amirmehrizi6045 2 жыл бұрын

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

@ask43242flight 9 ай бұрын

very nice presentation. Thank you!

@Arabian_Epileptic 2 жыл бұрын

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

@kushagra-aa 2 жыл бұрын

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

@govindbchandran8681 2 жыл бұрын

Nice. This was pretty informational actually

@vikasni95 2 жыл бұрын

Very good & clean explanation

@abdikarimissa5428 2 жыл бұрын

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

@alialavizadeh2775 2 жыл бұрын

that was very good, awesome explanation on hooks

@phillyt22 Жыл бұрын

You have a gift Sonny. Thanks you.

@sahilkc23 2 жыл бұрын

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

@abuhossain4274 Жыл бұрын

nice and simple ! thanks

@amrindraouk3440 2 жыл бұрын

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

@emmanuelmanana1527 2 жыл бұрын

on time on point always!!!

@traviaroad_7 2 жыл бұрын

Awesome Explained

@homegadgetsreviews 2 жыл бұрын

Sonny is a really good instructor

@danzo1956 2 жыл бұрын

Simply perfect 100%

@hamidr8391 2 жыл бұрын

Helped alot

@harishg9429 2 жыл бұрын

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

@javadkhan5094 2 жыл бұрын

Nice work sir

@syedalirazarizvi9653 2 жыл бұрын

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

@filip23128 2 жыл бұрын

Thanks!

@reactversechannel 10 ай бұрын

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

@mohibkhan2492 2 жыл бұрын

Awesome video 100k soon!

@soja2897 Жыл бұрын

Nice tutorial

@abdelrahmanelbeltagy3942 Жыл бұрын

thanks bro...

@surendrajat7290 8 ай бұрын

next level video

@ghcoder5477 2 жыл бұрын

Awesome video

@WhatsThisWhoa 11 ай бұрын

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 2 жыл бұрын

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

@teflonhav Жыл бұрын

thanks

@codenerd7823 2 жыл бұрын

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

@innovafrique 2 жыл бұрын

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

@amanjanwani1486 2 жыл бұрын

Yo AMAZING

@feliwein_cc 2 жыл бұрын

pushing to 100k!

@javalover7570 2 жыл бұрын

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

@ajeethkumarr6744 2 жыл бұрын

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

@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 Жыл бұрын

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

@pawanbarnwal6239 2 жыл бұрын

Hey! Add some stuff for complex design with material ui

@mehulsrivastava2799 Жыл бұрын

no one can teach better react than him

@adnanahad 2 жыл бұрын

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

@patelkrupa3475 Жыл бұрын

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

@navalmalaviya6024 2 жыл бұрын

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

@ronananderson 2 жыл бұрын

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

@eranilde7359 Жыл бұрын

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

@gergelygrusz713 2 жыл бұрын

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.

@tahavirdiwala4881 2 жыл бұрын

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

@beastnighttv 2 жыл бұрын

Nope

@Nuclearoscoop 2 жыл бұрын

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 2 жыл бұрын

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

@Nuclearoscoop 2 жыл бұрын

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

@ShivamSingh-ic4kh 2 жыл бұрын

@@Nuclearoscoop what is your github link send me too

@kaan3045 2 жыл бұрын

@@Nuclearoscoop you got any answer ?

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

@shalihuddinfams1227 2 жыл бұрын

What if first name and last name unchanged when fire submit

@Susantha 2 жыл бұрын

Coool

@chrisstucker1813 Жыл бұрын

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

@handsome_man69 2 жыл бұрын

Handsome man

@aid.shorts 2 жыл бұрын

Sunny bro please create a search application

@lifebest4404 2 жыл бұрын

Sir how to create classified ads mobile application flutter backund php

@dark9y8 2 жыл бұрын

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

@wenlongteo6272 2 жыл бұрын

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

@kaan3045 2 жыл бұрын

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