useEffect, useRef and useCallback with 1 project
Vložit
- čas přidán 5. 09. 2024
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
""/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](/img/n.gif)
This react series was amazing on the internet. I have watched more than two series on udemy but no one can explain all concepts like you.
And you have made this series in hindi it is very helpful me to understand each and every concept deeply.
This bonus is not enough for this awesome series but I will give you more support on upcoming videos.
True even i purchasded a course, but total waste of money....Nothing can beat this great series
I don't see the point of using useCallback in this project because the only "things" which can cause re-renders are already passed as dependencies to useCallback which means passwordGenerator function is recreated on every re-render anyway and is never memoized between re-renders because nothing outside of the passed dependencies cause renders
@@talhakhan4684 every time the component re-renders (which can happen for many reasons, such as state changes), a new instance of the passwordGenerator function is created. This can lead to performance issues, especially if the function is passed as a prop to child components, causing them to unnecessarily re-render.
sir harbar optimize - optimize bolte hai uska matlab kya hota hai explain me plz???
0:00 - 5:29 - introduction
5:45 - project setup
9:53 - start
9:47 - use of useState hook
14:15 - generating password (useCallback hook : Memoization)
24:15 - designing ui
32:19 - explaining check mark at radio button
33:28 - calling of password generator function
36:11 - use of useEffect hook
42:31 - copy button using useRef
50:27 - copying a range from password field
52:23 - summary
POV: You got a placement from Hitesh Bhai
Thank You!
Thanks a lot
I don't see the point of using useCallback in this project because the only "things" which can cause re-renders are already passed as dependencies to useCallback which means passwordGenerator function is recreated on every re-render anyway and is never memoized between re-renders because nothing outside of the passed dependencies cause renders
mera text-color se color change nhi ho rha h
kaise thik karu
kya sir basic basic bol ke itna bara project bnwa diye 2 3 bar video dekhna pra lekin samajh me aa gya thanku
how is your progress in one month and any tips on how to optimize my learning through this playlist
@@abr5744 first learn basics and then follow this , it'll be like cherry on top
@@abr5744 Make projects with vanilla javascript on your OWN before learning react.
Take help of internet and chatGPT
Sir ik chez maine note ki hai. Ap humare brain mai andr ja k scrow open kr k chezain dal lety ho. Really amazing lecture. I revised this lecture 3 times and i was wondering k apne kitna best tariky sy kia. mai pehly 1 mint ki video dekh k seekhta ta aur ab 57 mint ki video mai apke liye duaye dil sy nikal jati hai. Love you sir and I always sharing on linkedIn your content. Thank you really thank you.
watching 2nd time got more clear to the concepts sir ji
1. use Callback: used for optimization it calls the function inside it when the dependencies are changed and returns a memorized function
2.useeffect: runs the function inside it whenever the page renders first-time or dependencies are changed
3.use ref : used to give reference of selected components in our page so that functions can be performed on referenced values
💙💙💙💙💙
I don't see the point of using useCallback in this project because the only "things" which can cause re-renders are already passed as dependencies to useCallback which means passwordGenerator function is recreated on every re-render anyway and is never memoized between re-renders because nothing outside of the passed dependencies cause renders
how is your progress and any tips on how to optimize my learning through this playlist
@@abr5744 my experience is good my only advice is to make some good projects and learn through it
I have seen many time this video I like it you are amazing sir thanks for making this video
Sir,, My Humble Request is to Provide Us NON-STOP A Series Of Playlists 🙏🙏🙏🙏
One Playlist For ReactJS
One Playlist For NodeJS
One Playlist For ExpressJS
One Playlist For MongoDB
One Playlist For MERN Projects
One Playlist For MERN Interviews Questions
I wish, you gain 1M subscribers before ending of 2025 💪❤
This is My request
put a copywrite quick🤣🤣@@contentbrother360
so jaa bhai 1M Green Tea,
@@user-jq4mg7xe3j bhai, abhi jaga just now 😁 😇 4 months purana comment hai aur jis level ki teaching and explaining skills hain sir ki vo 1M kya 10M deserve krte hain but uno ne multiple courses ke wajah se consistency ke sath compromise kr diye nhi toh hota at least 500k, because 4 months ago, that point of time there was a lot of hiring announcement by companies.
but kuch bhi ho , jaldi se 1M ka tag lagwa dete hai bol bol kr ke 🤪😇
Yes sir please, it is the most awaited playlist of playlists
Aajtak kisi ko nahi dekha jo itni depth mein samjhata ho...
commendable 🌸🌸
I'm really impressed with the way React JS topics are being taught in such an innovative and engaging manner. Instead of just delving into the technical aspects, you take us on a journey of exploration and hands-on learning. You found a way to make complex concepts seem approachable and exciting for us. Thanks for sharing!
This video alone took me 6 hours to complete I always like to understand evrything my biggest concern was why should we cannot use useEffect instead of useCallback but after searching and some trials and errors i know now the difference perfectly.
what's the difference??
One of your greatest strengths as a teacher is your exceptional communication skills. You have a remarkable ability to convey complex ideas in a clear and understandable way, making the learning process enjoyable and effective. thank you😊
31:15 Hats off! To you sirji, you are making superb level of content on CZcams. and after hearing from you that this video is made at night after completing your all-day work, my respect for you goes beyond the sky.
Humble request to continue the series daily,bhaiya..Your explanation is awesome..!
No words left to say thanks sir. Just can say , you are the most right educator I've ever found. May Krishna bless you and keep you happy forever 💙
There is a small mistake in picking a random character from the 'str' variable. And that is in this line 'let char = Math.floor(Math.random() * str.length + 1)'. The mistake is that the random method gives us a value from 0 to 1(exclusive) so that means we have a number from 0 to str.length(exclusive), so the last valid index in 'str' is str.length - 1, but when we add 1 to it, the index goes beyond the valid range and that's why sometimes when generate the password, it is one less than the length range. So simply remove the addition of one so that it works as expected like this let char = Math.floor(Math.random() * str.length).
Hope this helps.
Yes, i was thinking the same. That +1 will take it to next range, eg. 56 length *.99999 will still result in 55.something and doing +1 and flooring it will give 56, but range is 0 to 55 not 1 to 56 as array are 0 indexed. So anyways we need the upper limit -1 of the length.
Your react series is awesome Hitesh Sir. Please come up with more videos which include in-depth concepts and interview questions!❤❤
Yes
Yes
I think we should not include setPassword in the useCallback dependency array, because when this functional component rerenders, the reference of the setPassword function would be different from the setPassword function on previous rerender. So this would again create the function. This would totally defy the reason why we are using useCallback as the function would again be created on every rerender.
You are correct
@@chaiaurcode
In React, the setState function retains its reference between renders, and the reference to it does not change unless the component unmounts.
This behavior is consistent within the same component instance during its lifecycle. As long as the component is mounted and not unmounted, the reference to setState remains the same throughout rendering and re-rendering cycles.
render, re-render is different from mounting and unmounting, right ?
So, it should get retained in memory. And what you did was correct I guess, setPassword does not change ever, so mentioning it within the dependency array doesn't affect the memoization of the function at all, it is all the other dependencies that have a direct relationship with memoization.
When includeCharacter and includeNumbers are toggled a new function body gets returned by useCallback. And only then the useEffect gets triggered.
Please correct me, if I'm wrong. And do pin this comment so that it gets more attention.
@@chaiaurcode No Hitesh, you are wrong. According to react docs, React guarantees that setState function identity is stable and won't change on re-renders. This is why it's safe to omit these functions from the useEffect or useCallback dependency list.
@@sayandutta2038 You are correct brother. Your comment should be pinned. This was something, which hitesh was not able to explain correctly.
@@sayandutta2038 Actually I think that useEffect triggers first, and when it calls passwordGenerator, then here memoization and all is taken into consideration.
Since useEffect is also executed when length, numberallowed, charallowed changes. These are same dependencies associated with useCallback(). So passwordGenerator will create a new function..
Actually, he just wanted to explain useCallback(), that's why he has used it here. Because everytime the passwordGenerator is called a new function is created.
I may be wrong.
51:00 if anyone have problem in line no. 34 --->
in line 34 we are copying the whole password to the clipboard, because even if we give the selectionrange to (0,3)or(0,20) because that doesn't affect the writeText method , we are giving the whole password here.
for this --> you can use string.splice() or string.substring() method to take the desired value
yes i was facing this issue
Yes i am facing the same issue ,can you provide me the code ?
Write setSelectionRange correctly in camel case it will work
but how did sirji's code worked out?
Explained deeply, understood the concepts. Commendable job sir.
sir apky 2024 k last tak 1 million+ subscriber ho jayen gy ku k apka quality content bht he zabrdast hai love from pakistan
Your videos are great, very indepth concepts. Thank you for such organic content you are sharing with us.... I am from Pakistan btw. Enjoying your videos, getting deeper concepts of JavaScript ❤
In my version i have added copy copied feature where if user has copied the pwd so it will show colied but if user changes the length and number or character I will copy text again
Learning with Hitesh Sir ❤❤❤
Chai aur code me apka swagat hai !
guys i have watched this lecture witha a gap of 20 mins in first time some things were going just above the head but in 2nd time... things got crystal clear..
The entire 57.14-minute video encapsulated a valuable lesson that would otherwise have required much more time for corresponding theory and practical analysis. Kudos to Hitesh sir for his meticulous and insightful approach to basic building block analysis.
This series will blow up ...the way you teach every concept is just amazing...you just dont teach us you help us to gain confidence in what we learnt here and implement the same....All this is for free thanks a lot Sir
L
38:19 in line 19 of the code, in each iteration of the loop, you are storing the randomly selected character from the str string to pass variable and then in next iteration you are overwriting that value.
but instead, you should be appending the randomly selected character from the str string so the pass variable should hold all the random characters.
Yes thats what i am thinking too
IS there anyone who is looking twice this vdo ?? or Iam I only one?
I'm looking this video in 10th time but still I'm not able to understand I think I should watch another channel
@@tarunpanwar6983 i also looking for another channel
brother
lol I also didn’t get it in the first go
I watched other videos from CZcams of these hooks mentioned in this video and then came back to this video
Now it’s understandable
Yes
@@tarunpanwar6983 same with me man guess i have to watch other videos
Thanks a lot sir, itne sare hooks ko itne ache se explain karne ke liye.
i was creating projects without major tutorial and in little logic i was getting stuck this helpd me alot to understand this basics hooks
I'm really impressed with the way React JS topics are being taught in such an innovative and engaging manner. Instead of just delving into the technical aspects, you take us on a journey of exploration and hands-on learning. You found a way to make complex concepts seem approachable and exciting for us. Thanks for sharing!
Hi Hitesh!
For the numbersAllowed checkbox setNumbersAllowed(!numbersAllowed) should also work right?
Had this doubt since setNumbersAllowed only needs to be called once. In the interview questions it was a problem of async setState fn not considering the previous value returned by setState fn itself.
Thanks!
Difference between UseEffect and useCallback dependencies
1.useEffect dependencies are used to call function again whenever any changes are found in dependencies
2.useCallback dependencies are used to memoize function again whenever any changes are found in dependencies
!!!!Thank you so much sir aapki knowledge free me share karne k liye jaise aap pada rahe ho jo is field ka nahi hoga wo bhi sab samajh jayega thank thank you sir ye mere liye bahut bahut jyada helpful h
Namaste Guruji...
this is the type of learning experience, that will develope your ability to understand what actually we are doing with features available in any libraries.
your experience as a teacher helps us a lot , as you know from your experience what are the ways to teach students.
we need this kind of patience and dedication in all the teaching community.
hitesh bhai - dont ask for the comment and likes-- aapka content aisa hai ki aapki expectation se zyada support milega ,
i love your content
I have seen many videos of hooks but could not understand them as much as I could from your video. Thank you much sir!
i watched this video two times today and now i am attempting my third attemp pray for me
Nice explanation of hooks. By making project its clear the ambiguities. Thanks sir
very nice explaination better than any paid course
thank you so much sir
Your teaching style amazing jitna bhi dekho kuchh new learn and concepts revised hota hi hota hai , thank You Sir❤❤❤
Mazaa a gaya the way you teach us each and every way to write a clean and optimized code. Love and alot of from Pakistan.Kudos to you . One of the best react course
came for one hook, learnt all the hooks from this video. 🔥🔥🔥
Literally there is no other playlist on CZcams that teachs you react in so depth . Just Awesome...
Bahut achay se smjhaya sir ne, bahut bahut Shukriya Hitesh Sir apki efforts ko slam
one of the best series on youtube, sir your way of explaining concepts through projects is top-notch
Thank you sir 🙏for this amazing content on youtube because I rewatched this video to learn the basics of hooks
40:40 sabse important point yahaan se start hota hai dono hook useCallBack and useEffect bhale hi same ho lekin dono ki functioning me difference hai
1. useCallback hook mainly uski dependencies ke memoisation ke liye responsible hai mainly ye methods ke refrence ko apni memory me cache krke rakhta hai taaki component rerender hone par kahi method ka refrence change na ho jae or wo ek new method ki tarah hi treat ho warna uspar depend baaki component bhi fhir se rerender honge kyuki method ka refrence (means address in the memory) change ho gya hai
2. Wahi useEffect sirf apni dependencies ke behalf par us callback function ko run karwaata agar dependencies change hui to wo useEffect ka callback bhi run hoga jisse uske ander hue task jaise yahan passwordGenerator function ko call krwaana wo invoke ho jaega. Thnk u so much sir ye sab clear krne ke liye.
What a wow series I can't thank you enough for this series, you're literally the god for all of us developers really love your work
Glad you enjoy it!🤗☕️
kuch bol hi nahi sakta , apki teaching ke bare main , wow, too good , felling samjo bas,.....! nice thank You>>>>!
I think this is the best React Library series till date . Thank you Sir....
One of the Best teacher in youtube in my opinion i watch alot of coding related channels but the way he teach its just like awesome Hats off to you sir
Amazing React series. Hitesh sir your teaching is awesome. Best series on CZcams.
Thank you for the great explanation! Your videos are super helpful and easy to follow. Keep up the awesome work! 🙌
Legendary way to approach react hands off 👍👍
Thanks for the video sir. Well explained the use of useCallback hook.
sir your way of teaching is best, thankyou so much for your efforts😇😇
Yes sir mazza bhi bht aaya hai or sikha bhi bht kuch hai is video me .....Thank you.....
outstanding video ,bht sahi wali clarification hogye sir apki wjah sa hooks ki
such an important lecture ,it is so good to understand the need,working and application of hooks ,Thanks alot Hitesh Sir,the best
One thing more. meri react mai job ho gai. as a frontend developer. Iske liye maine sirf apka content perha. Love you sir
People don't know the importance of these series on chai aur code ❤️ we appreciate you hitesh bhai
you proved sir , "" never judge a project by its look "" , excellent job sir... 💯💯💯💯
greatest in teaching field Mr Hitesh choudhry. Thank you sir for all knowledge.
best video and the best playlist if anyone deeply want to learn concepts
VERY EXCITED FOR THIS JOURNEY SIR
Sir you are awesome and too calm
This react series was amazing on the internet
U have made React Js more interesting for me thank u!
thank you so much sir ....mujhe ab samajh mainn araha hai react isrf a ki videos ki wajah sy....🥰
I love all the courses of your's, the way of teaching is outstanding, no one go soooo deep into the concept. I hope more such videos will come for us.
thanks for such interactive and understanding series.
grandmaster of technology shri hitesh sir 🤗
It would be a shame not to leave a comment on this video before moving on to another lecture in the series. Kudos to you, sir-you're truly exceptional! 🔥🔥🔥
Thank you so much for explaining these hooks in such an easy and interactive manner..!! Kudos to you for what you are doing for the community! 🙏
I sat down to watch this video without much interest, but by the time it reached 5:40, I became curious listening to the sir .
His ability to captivate and engage with the viewer || student is absolutely remarkable ; 👍🏻🦁
God level teaching........worth every effort with you sir
was following english channel then found out this playlist and started learning in hindi...apni bhasa mein achhese samaj ata hein..😄
The most under rated youtube channel
For Real sir
Love from Pakistan
🔥 Nicely Explained about why use hooks 🔥
This man deserves millions of subscribers
Thankyou very much sir for this video and for providing in depth knowledge of how to use useEffect, useRef, useCallback and where to use.❤❤❤
40:00
because of useCallback hook .. when we add a password variable in dependency array in useCallback, so it call setpassword... then password has to change then again setpassword called itself so it is continuesly calling again and again ..
callback is for optimization(caching the dependencies) and useEffect call function when there is any change in dependencies
To the point Explanation!! Just loving it. Thank you so much for such a clear and greatcontent.
We Wish You Will Be Success Here And Here After Also.
You Help Us To Grow Up Over Skills.
Thanks Dear Sir Hitesh Chaudary
Password generator is not a easy project but after watching this video I understand all the hooks and concepts which is used in this project and most important thing how You optimize your project i got it.
Thanks for all the hard work you put into these videos. Keep it up! 💪
Great Job sir I realy appreciate you i gain alot of knowledge from your vedios no paid cours can teach us like you can go in the depth of the code and explain very easily with best examples
It's going to very amazing sir and now I am going to start it.......
10:33
To keep track of length we need an input of type range and a value attribute in which we have to pass state variable length, and then we have to make a function to calculate length and do other stuff then we have to pass that function to
onChange={funcName} attribute of the input.
Hitesh Sir, Just wanted to say that You explained all the Concepts and behind the hook intricacies very well...Kudos to you..Hatts Off
most special teacher
passwordRef.current?.setSelectionRange(0, 3)
using this line of code, We can only make a change in UI it means 3 Selected character will be shown BUT it DOESN'T means that 3 characters are copied to clipboard, Actually whole Text(Password) will be copy to the clipboard.
This is what i find during tutorial...
Anyways a Great series Hitesh Sir, Never seen any video in this much depth on youtube. Hatsoff to you sir for a great efforts. This really means a lot!!
As a begginer mujhe thora sa zyada laga ye video..course bohot acha hay..matlab agar chizo ko individually thora thora karke samajhaya hota to acha hota ..ny the way its jst my opinion...
is video ko dekhte dekhte khud try karo or video bar bar dekho 2-3 din me samajh aajaega
Thanks, sir for having such an amazing approach to making complex things simple and teaching us every concept while gaining hands on experience and projects.
i like way of teaching and depth of the concept easy way.Sir Try Create Series for MERN Stack interview question and solution .
Amazing video sir, no paid course comes even close to the quality of your videos.
The way you teach is fantastic with great deep knowledge explaining
Great explanation ❤ Lagta hai ki senior dev banakyaei choroge😂
Thank you sir very much for this amazing course for free