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

[@benmorgan-cleveland2446]

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

[@NouraHussain]

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

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

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

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

[@duanedodson1]

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

[@vijayroy93]

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

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

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

[@loudcapricorn5513]

Great video. Simple and easy with that explananation

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

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

[@martinnjeri6997]

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

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

[@abinasb]

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

[@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?

[@somaadina8102]

This is one of the best react series on yt❤

[@dipakchavare778]

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

[@need_2_know]

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

[@Adventures_English]

Great Project. Great Attitude. Great UI.

[@NikhilHedukar]

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

[@HiteshCodeLab]

Glad to hear that

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

[@lasagna2240]

Thank you for the series!

[@umarxaman7761]

real hero in development

[@sumontasaha5638]

Thank you for the Quality of teaching, Sir

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

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

[@TVCeker]

Thank you for your free educational video.

[@vishwanatha6859]

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

[@madhummh77]

Great effort towards quality of teaching

[@PranavPatil-e6l]

Your videos are always helpful for me.

[@haque259]

Your videos are best so far

[@suryakumar7285]

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

[@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)
}

[@martinnjeri6997]

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

[@nigam_sharma]

From chai and code ❤

[@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)

[@PradeepSharma-ox9mw]

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

[@aaronmanocha9158]

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

[@mattakalyan1427]

Thanks for giving this nice course

[@animeshmondal9569]

Thank you sir for this course❤❤

[@DriveDiveAroundtheWorld]

Thanks for this course and your work on this.

[@SMSHIHAB]

Really helpful series for learning to react

[@irtizahussain7164]

Great work, appreciated. 😃

[@_sarthakmisal]

100th Comment Hitesh Bhai

[@DeepakSankhyan]

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

[@suvrajitmondal2325]

Thank you. Very useful video.

[@HiteshCodeLab]

You are welcome!

[@mobileLegendFunMoments]

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

[@HiteshCodeLab]

Keep watching

[@sivasaireddy1601]

great Hitesh

[@frankjonathansaenz1911]

Great tutorial!!

[@Bhaskarjyoti02]

Im very much thankful to you sir

[@letshope5646]

Thanks Hitesh...

[@dolfieaspeling9893]

Please, please keep going !

[@morecoinbull]

Keep going Bro! Great Job

[@jun4idm0min]

Hitesh brother 💐💐

[@Hatsoff4u]

its really awesome

[@murshid956]

Thank you so much for this video

[@henryamos]

I love this react coding

[@jayakumar9976]

Awesome. Learned about usecallback hook.

[@HiteshCodeLab]

Glad it was helpful!

[@mahendrarajput2870]

Nice explanation.

[@ankushchavanwebdeveloper]

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

[@GOKKULVSIT]

great work

[@vijay-dw1bl]

Nice work bro

[@prateekbidve]

Let's go ❤

[@HiteshCodeLab]

❤️

[@bijendernagar15]

yes sir sooooo intrestedddddddd

[@powerfulmath8488]

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

[@sudeepjoshi9948]

Intelisense or ai like tabanine, copilot,cody

[@miraclemaxwell9988]

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

[@navinkumarsahu1159]

much needed

[@nasrinagashte]

Thanks 😊

[@chiranjeev331]

Haanji you are back 😅

[@noobCoder26]

wonderful

[@arkodeepchatterjee]

🔥🔥🔥🔥🔥🔥🔥

[@sriramvenkatesh]

Thankyou ji

[@VivoMobile-yg9zh]

thanks sir

[@abdudujjjana8512]

nice

[@yashvantryadav]

Thanks

[@deadlylive_gaming7154]

thanks🎉

[@TheCareerGuide601]

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

[@tretawebsolution]

[@_crista]

make more don't stop

[@ajassharafudeen]

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

[@dhruvcharkhawala7509]

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

[@zues8150]

Starting easy project:- 🤡
Ending complex project:- 🗿

[@videosforyou8751]

❤

[@hvg800]

Hy sir , there are several "Post Graduate Program In Cloud Computing" which offers Certification Aligned with AWS ,GCP, Azure and are providing industry lvl knowledge , practices , project developments and lot more , and are charging from 65k to 1.5 lakh having a course tenure of 6-8 months , wanted to know that is it beneficial to spend this much for these kindda stuffs, or just simply should pursue for individual certificates step by step (as u taught ) ,,
it will gonna be very helpful if u can plz clear this out , for each and every perspective (beginner, intermediate , pro ). 😊

[@ogawde7]

Simplilearn ?

[@hvg800]

yep , any kinda info u know about ???@@ogawde7

[@HiteshCodeLab]

Benefit is a very personal term. Each offering has it's own value proposition.

[@akarshk7518]

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

[@viththagan3547]

Thank you

[@HiteshCodeLab]

You're welcome

[@gyanabhijeetshivam3692]

♥♥♥♥

[@sharathkumar726]

👍

[@arunks8106]

♥

[@The_Developer_]

we are interested

[@harikrishnanpandyan5684]

Why in this channel less react video or u r uploading slowly... 😢😢

[@HiteshCodeLab]

I upload as I get time from life 😁

[@twiceuponatime7625]

Thank you hindi fan

[@HiteshCodeLab]

❤️

[@nagendranfriends3153]

Why bootstrap is not used here

[@HiteshCodeLab]

Bootstrap, tailwind or any third party, this series is not focused on CSS

[@nimeshcheedella8124]

commenting for boost

[@mgnregakashmir5999]

Coffee and React

[@HiteshCodeLab]

I am more of a tea person 😁

[@5minupsc723]

where is the code