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

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

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

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

[@benmorgan-cleveland2446]

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

[@user-gh2vo6rc2u]

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

[@loudcapricorn5513]

Great video. Simple and easy with that explananation

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

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

[@martinnjeri6997]

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

[@lasagna2240]

Thank you for the series!

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

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

[@abhishektiwari8431]

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

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

[@animeshsingh1605]

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

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

[@martinnjeri6997]

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

[@need_2_know]

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

[@somaadina8102]

This is one of the best react series on yt❤

[@abinasb]

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

[@aaronmanocha9158]

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

[@Donald.L.Rosenberg]

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

[@user-dh5ih1kg3m]

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

[@Adventures_English]

Great Project. Great Attitude. Great UI.

[@dipakchavare778]

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

[@towseefahmed6328]

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

[@HiteshCodeLab]

You are most welcome

[@sumontasaha5638]

Thank you for the Quality of teaching, Sir

[@umarxaman7761]

real hero in development

[@suryakumar7285]

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

[@NikhilHedukar]

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

[@HiteshCodeLab]

Glad to hear that

[@vishwanatha6859]

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

[@Bhaskarjyoti02]

Im very much thankful to you sir

[@nigam_sharma]

From chai and code ❤

[@haque259]

Your videos are best so far

[@TVCeker]

Thank you for your free educational video.

[@madhummh77]

Great effort towards quality of teaching

[@user-zp1eh8bq6m]

Your videos are always helpful for me.

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

[@henryamos]

I love this react coding

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

[@frankjonathansaenz1911]

Great tutorial!!

[@suvrajitmondal2325]

Thank you. Very useful video.

[@HiteshCodeLab]

You are welcome!

[@SMSHIHAB]

Really helpful series for learning to react

[@DriveDiveAroundtheWorld]

Thanks for this course and your work on this.

[@animeshmondal9569]

Thank you sir for this course❤❤

[@mattakalyan1427]

Thanks for giving this nice course

[@sivasaireddy1601]

great Hitesh

[@Hatsoff4u]

its really awesome

[@_sarthakmisal]

100th Comment Hitesh Bhai

[@deadlylive_gaming7154]

thanks🎉

[@irtizahussain7164]

Great work, appreciated. 😃

[@miraclemaxwell9988]

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

[@DeepakSankhyan]

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

[@letshope5646]

Thanks Hitesh...

[@murshid956]

Thank you so much for this video

[@navinkumarsahu1159]

much needed

[@mobileLegendFunMoments]

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

[@HiteshCodeLab]

Keep watching

[@nasrinagashte]

Thanks 😊

[@sriramvenkatesh]

Thankyou ji

[@user-iw7il6zq6j]

Let's go ❤

[@HiteshCodeLab]

❤️

[@mahendrarajput2870]

Nice explanation.

[@jun4idm0min]

Hitesh brother 💐💐

[@dolfieaspeling9893]

Please, please keep going !

[@jayakumar9976]

Awesome. Learned about usecallback hook.

[@HiteshCodeLab]

Glad it was helpful!

[@VivoMobile-yg9zh]

thanks sir

[@bijendernagar15]

yes sir sooooo intrestedddddddd

[@arkodeepchatterjee]

🔥🔥🔥🔥🔥🔥🔥

[@morecoinbull]

Keep going Bro! Great Job

[@abdudujjjana8512]

nice

[@GOKKULVSIT]

great work

[@prasad2003g]

thanks

[@ajassharafudeen]

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

[@vijay-dw1bl]

Nice work bro

[@PradeepSharma-ox9mw]

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

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

[@noobCoder26]

wonderful

[@sharathkumar726]

👍

[@jatinthakur2501]

❤

[@A134gEmail]

Pro

[@powerfulmath8488]

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

[@sudeepjoshi9948]

Intelisense or ai like tabanine, copilot,cody

[@_crista]

make more don't stop

[@ankushchavanwebdeveloper]

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

[@dhruvcharkhawala7509]

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

[@TheCareerGuide601]

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

[@arunks8106]

♥

[@viththagan3547]

Thank you

[@HiteshCodeLab]

You're welcome

[@chiranjeev331]

Haanji you are back 😅

[@The_Developer_]

we are interested

[@zues8150]

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

[@user-cq7dw8co4k]

[@akarshk7518]

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

[@nimeshcheedella8124]

commenting for boost

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

[@veerabubali2245]

Hi

[@sheshasaibabagujjari3481]

comment++

[@5minupsc723]

where is the code

[@harikrishnanpandyan5684]

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

[@HiteshCodeLab]

I upload as I get time from life 😁

[@vamshi2nd392]

comment++