useEffect, useRef and useCallback with 1 project in Reactjs

In this video, Hitesh walks you through the practical use of ReactJS hooks like useEffect, useRef, and useCallback by building a simple yet insightful project-a password generator. Despite the project’s basic appearance, it’s designed to demonstrate ReactJS best practices, focusing on optimizing component re-rendering and enhancing user experience. Hitesh explains how useEffect runs code on component mount and re-runs when dependencies change, ensuring the password updates dynamically. The useRef hook is utilized to reference and manipulate DOM elements, such as highlighting text when copying. Additionally, useCallback is introduced to optimize performance by caching function definitions, preventing unnecessary re-renders. This project, built using Tailwind CSS for styling, is an excellent example of how even a simple ReactJS application can involve complex, efficient coding techniques. Throughout the video, Hitesh emphasizes the importance of understanding these hooks to write cleaner, more efficient React code, making it a must-watch for anyone looking to deepen their ReactJS knowledge.
Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...

[@atishbackup9442]

What a way to explain things even after working 8 years in industry i find lot of point to pick and dig dive thanks HItesh SUperman

[@Noouurra]

thank you what a beautiful way to deal with React I loved it. man I do not feel time with you this is an amazing series to learn with thanks again

[@benmorgan-cleveland2446]

Hitesh, I love the tutorials! Clear, current, and easy to listen to and follow. Well done.

[@SrinivasBareddy]

Thank you Hitesh. Loved the way you are explaining the things...

[@Maniish.pandey]

I actually was studying from chai and react and i came here to revise the videos that I've studied😅, and these videos actually helped me understanding concept more.

[@АлександрРевин-ъ8к]

Hey Hitesh! You are the best speaker about programming that I've ever watched and listened. Thank you very much

[@golubhattuk01]

your single video cleared my all doubts about hooks

[@Ronieyit]

this tutorial series is the best l have found on React. thank you so much Mr. Hitesh. BUG: Sir - there are instances the password generated is less than the length specified, it still displays for the user the password however it is shorter than the user selection. work around l used is to use an if statement to compare the length of the password generated against the "length" required, if they are not equal re-run the "for loop", l created a function for the "for loop" to ensure for loop is not repeated. thank you once again

[@vijayroy93]

you are the best Hitesh. your teaching style is just out of this world and simple.

[@duanedodson1]

Thank you, again, this series has driven home so many of the skills I have been struggling with in react, thank you.

[@loudcapricorn5513]

Great video. Simple and easy with that explananation

[@sriyasuhrudi9438]

This series is the best for beginners trying to learn react. You make it sound interesting and easy to learn. Thank you Hitesh sir

[@martinnjeri6997]

THis is the most valiable 40 minutes video i have watched in a while...good job!!!!

[@ketanjadhav4328]

Bhai Hindi channel se aaya hu and after watching your videos here Sir you I have become a Fan 😊

[@somaadina8102]

This is one of the best react series on yt❤

[@animeshsingh1605]

The way you help us make to understand concept in JavaScript , is superb.

[@joelhenry2203]

thank you hitesh for this series. please continue this as long as as you can. Im learining a lot from this.

[@HiteshCodeLab]

Yep, we will be building some cool mega project too in this series

[@kashishagrahari7087]

Hey Hitesh! It was a wonderful, easy to understand, basic to detail, everything you have covered in this video🤩 Thank you so much for creating and updating such contents. Keep Going 🤓

[@abhishektiwari8431]

Thank you hitesh for this series really i am enjoying this playlist and building a frontend project from scratch

[@need_2_know]

Thank You sir ..❤ i came here after watching 3 hrs video on another channel.

[@dipakchavare778]

thank you Hitesh sir for this series.. Im learining a lot from this.

[@abinasb]

Thank you for sharing this video series which helps so much for learning react from scratch

[@Adventures_English]

Great Project. Great Attitude. Great UI.

[@suryakumar7285]

Thank you for this course sir , please continue this series as long as you can. ❤

[@FaizanKhan-gfaizank]

Anyone watching this, just know that you in the right place..

[@bhavikarathod2417]

if i will complete this series will I be able to crack the interviews?

[@umarxaman7761]

real hero in development

[@sumontasaha5638]

Thank you for the Quality of teaching, Sir

[@vishwanatha6859]

Amazing video, learnt a lot of things, Thank you so much Sir🤩

[@NikhilHedukar]

You are doing really good work. Your videos are always helpful for me. Thanks Hitesh 👍

[@HiteshCodeLab]

Glad to hear that

[@towseefahmed6328]

very much interested sir... thanks so much for this series it help us a lot in our projects

[@HiteshCodeLab]

You are most welcome

[@Donald.L.Rosenberg]

thank you what a beautiful way to deal with React I loved it.

[@DarthVader-z2s]

Thanks, Hitesh. In general, I wouldn't comment, but I want you to make such more videos, hence I'm on it for your morale. Cheers.

[@HiteshCodeLab]

Thanks a ton

[@haque259]

Your videos are best so far

[@PranavPatil-e6l]

Your videos are always helpful for me.

[@lasagna2240]

Thank you for the series!

[@TVCeker]

Thank you for your free educational video.

[@madhummh77]

Great effort towards quality of teaching

[@animeshmondal9569]

Thank you sir for this course❤❤

[@martinnjeri6997]

Vamossss...... you are an inspiration to many... bravooo 💪🏿💪🏿💪🏿💪🏿💪🏿💪🏿💪🏿💪🏿

[@lenny_off9723]

Hi , thanks for your tutos , very interesting and helping a lot. Juste a comment to tel you that there has been a small mistake in your code (nothing to bad). In the "for loop" you wrote "i

[@brianjones71]

right, or start the loop at 0

[@irtizahussain7164]

Great work, appreciated. 😃

[@DriveDiveAroundtheWorld]

Thanks for this course and your work on this.

[@mattakalyan1427]

Thanks for giving this nice course

[@aaronmanocha9158]

Thank You sir, you are doing a great work!!!!

[@SMSHIHAB]

Really helpful series for learning to react

[@nigam_sharma]

From chai and code ❤

[@jagadeeshp1163]

Guys give this guy a crown :))

[@tairouthecreator2196]

i love that one

[@suvrajitmondal2325]

Thank you. Very useful video.

[@HiteshCodeLab]

You are welcome!

[@Bhaskarjyoti02]

Im very much thankful to you sir

[@letshope5646]

Thanks Hitesh...

[@mobileLegendFunMoments]

Sir keep it up , i am following your both channels.

[@HiteshCodeLab]

Keep watching

[@jun4idm0min]

Hitesh brother 💐💐

[@_sarthakmisal]

100th Comment Hitesh Bhai

[@frankjonathansaenz1911]

Great tutorial!!

[@prasadpatil2371]

there is problem in for loop , hence i tried - for (let i = 1; i < length; i++) { const i = Math.floor(Math.random() * str.length + 1) pass += str.charAt(i) }

[@sivasaireddy1601]

great Hitesh

[@murshid956]

Thank you so much for this video

[@morecoinbull]

Keep going Bro! Great Job

[@chillappreciator885]

Thanks for the video, I learned a lot. But I really miss the github link to the repo of this course with the branch for this specific video. So that I can watch the video to the end, then open an editor and implement the project myself using your github repo as a cheat sheet. Currently we need to use the video itself without an ability to see the other files.

[@mahendrarajput2870]

Nice explanation.

[@aimenazim1508]

quite informative video learnt a lot in it. one little confusion, i did not get why we used "usecallbak" when "use effect" is doing the same thing.

[@Hatsoff4u]

its really awesome

[@abhiramkasturi6823]

Great video but I did not understand why we need to use useCallback for generatePassword function. Since it is tied to useEffect, wont the function be recreated anyway? Please correct me if I am wrong. Thank you.

[@nasrinagashte]

Thanks 😊

[@vijay-dw1bl]

Nice work bro

[@GOKKULVSIT]

great work

[@jayakumar9976]

Awesome. Learned about usecallback hook.

[@HiteshCodeLab]

Glad it was helpful!

[@DeepakSankhyan]

Why only 100 comments for this quality stuff.....

[@dolfieaspeling9893]

Please, please keep going !

[@henryamos]

I love this react coding

[@PradeepSharma-ox9mw]

Hello Sir, Great video, though one query , why we used dependency array on both useeffect and usecallback ?

[@bijendernagar15]

yes sir sooooo intrestedddddddd

[@meowmeowfood]

Excellent series so far. Just a quick question about the "onChage" method. When you write "onChange = {(e) => setlength(e.target.value)}," how does the javascript know to immediately interpret the "e" as the event? Thanks in advance!

[@subbu7512]

The (e) is a shorthand for (event). It's a parameter that represents the event object generated by the browser when the onChange event occurs.Also the way function written here is with implicit arrow functions . Implicit return functions don't require any return keyword . (ES6+ JS Syntax)

[@sriramvenkatesh]

Thankyou ji

[@navinkumarsahu1159]

much needed

[@VivoMobile-yg9zh]

thanks sir

[@yashvantryadav]

Thanks

[@miraclemaxwell9988]

Thanks Hitesh please can you do something on python. You are the best

[@Gamerz-g4i]

thanks

[@noobCoder26]

wonderful

[@powerfulmath8488]

how are you getting the auto suggestions when you are defining the states?

[@sudeepjoshi9948]

Intelisense or ai like tabanine, copilot,cody

[@deadlylive_gaming7154]

thanks🎉

[@ankushchavanwebdeveloper]

Could you please share which extension you're using to receive auto-suggestions in your code editor?

[@arkodeepchatterjee]

🔥🔥🔥🔥🔥🔥🔥

[@Dev.Shoaib]

Again, no words

[@CodeNageShorts]

nice

[@prateekbidve]

Let's go ❤

[@HiteshCodeLab]

❤️

[@TheCareerGuide601]

Ey intern hire kr rhe hain? Ey techthon comp sahi hai?

[@ajassharafudeen]

guys, what extension prompts vs code to autocomplete useState snippets as shown in 09:40.

[@atharvatirkhunde4517]

GitHub copilot

[@Arun30802]

It's ai bro may be supermaven pro or some co pilots.. don't use that btw

[@viththagan3547]

Thank you

[@HiteshCodeLab]

You're welcome

[@SatyamShah-x6d]

👍👍👍

[@chiranjeev331]

Haanji you are back 😅

[@_crista]

make more don't stop

[@tGoldenPhoenix]

❤❤❤

[@The_Developer_]

we are interested

[@gyanabhijeetshivam3692]

♥♥♥♥

[@dhruvcharkhawala7509]

generatePassword function is working without useCallback.... why?

[@sharathkumar726]

👍

[@akarshk7518]

Day 3 of React Journey. 5th video of the day.