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
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
Hey Sonny...maybe it's time to start dropping some big TS projects - it's the future
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.
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.🙌
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!
Brilliantly explained and demonstrated! Thank you!
it was pretty straightforward thing I have ever seen about custom hooks and ref. big like bro
This is super helpful, easy to understand in a minute, Thank you Sonny
I was looking for useRerf tutorail and after not getting any on this channel I found this👌greaT
Always good to hear from sonny 100k sub special make it a good one 😍 Can’t wait for that next 5 day challenge 💪🏼🔥🍿
Very well explained, i loved it, you should also do a video on react optimisation
Amazing tutorial. I started bein having love with React is. Thank you
very nice presentation. Thank you!
useRef was fun ! Sonny you are best. Make this comment pinned so that sonny can see
on time on point always!!!
that was very good, awesome explanation on hooks
Nice. This was pretty informational actually
Simply perfect 100%
Hey Sonny! Great tutorial ❤️. One question 🙋♂️ Can we use Debouching in this case instead of useRef hook?
I have learned another trick. Thank you Mr. Sonny.
Very good & clean explanation
nice and simple ! thanks
You have a gift Sonny. Thanks you.
Helped alot
Sonny is a really good instructor
Nice work sir
Awesome Explained
Now i know why I need to pass variables in a dependency array, thank you
Awesome video 100k soon!
If revolution in Teaching had a face, that's surely gonna be this webcam one...... Love from India
next level video
Thanks!
thanks bro...
Nice tutorial
Your videos are amazing. I am waiting for lucid chart/google draw clone.
Yo AMAZING
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.
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?
Awesome video
pushing to 100k!
Hey sonny, may I know the multicolor drawing pen name which you guys using on the screen
thanks
Please tell me witch tools doyou use to make this awesome video.
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.
Hey! Add some stuff for complex design with material ui
Useeffect have empty dependency array then why it will run every time when button click ??
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'.
Please make separate video of Redux tutorial please please... 😊
Sonny could pls tell me that on Amazon clone you used firebase, does that firebase works on today's version?
@beastnighttv
2 жыл бұрын
Nope
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.
no one can teach better react than him
What if first name and last name unchanged when fire submit
Please make a tutorial on GIT also, please!!!
It seems the api is down. Could anyone help with the current api...
Coool
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.
Good tutorial but I can't access the joke API? I think it's been taken down.
Erm isnt this useRandomJoke hook is a simple function that return value?
Sir how to create classified ads mobile application flutter backund php
Handsome man
Bro, you like like Punjabi Indian, aren't you ?, Btw please keep making project based videos, and concept videos like this.
Sunny bro please create a search application
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
Sunny are u from punjab because sangha surname is punjabi
@dark9y8
2 жыл бұрын
He even looks like Indian as well.
lol why are you using async with .then() instead of await
Please course of video calling and chat flutter 🙏
can you do google classroom
Can you create a game ?
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
Since when did mo vlogs start a coding channel?