The useRef Hook in React | Sigma Web Development Course - Tutorial

[@Harshitupadhyay780]

harry sir plz dont stop posting videos in this course we r continously following your coarse...you are the best

[@AIMasteryHub-nz2uy]

Your course > 16laks degree❤❤❤❤❤from Pakistan You are one of the best teacher of my life❤

[@Abdul_rafey]

You are wrong😂

[@GODGAMING-vl1bb]

Aree bhai 😂

[@podshortscastt]

PK mai 16L ki degree hoti bhi hain

[@Heart-495]

Habib university​@@podshortscastt

[@RajdeepDas-oo5gz]

​@@podshortscastthar kisi ko chota mat dikhao 😒

[@Billionaire-wh5fp]

00:01 The useRef hook is used to create a variable that persists during re-renders. 02:06 Understanding re-rendering due to state variable changes 03:44 React introduces useRef hook to persist variable values across re-renders. 05:40 The useRef hook allows for persisting a value across re-renders. 07:31 The useRef hook allows direct referencing without DOM manipulation 09:16 The useRef Hook in React allows accessing and manipulating DOM elements. 11:06 The useRef hook in React allows for persisting values across re-renders. 12:52 Referring to elements using the useRef hook in React

[@AyanKhan-nx3in]

Consistency ka badshah ❌Harry Bhai✅

[@prasenjitnayak_]

HarryBhai tells consistency to be consistent 🗿

[@zararkhanzoro1591]

Absolutely love ❤❤❤ Harray's KZbin channel! Massive thanks from Pakistan for the incredible lessons in both the channel and the course. I've learned so much-thanks, Sir Haris Ali Khan! Your dedication and expertise have made the learning experience exceptional. Grateful for the valuable insights! (Love from Pakistan )❤

[@aizajsamani8894]

Itni Raat Ho gayi hai , pura video dekh liya hu, Nind aa rahi thi isliye kal ek baar phir se dekhna padega kyuki concept mere liye new tha. Thank you Bhaiyya❤❤

[@saurabhyadav9698]

saari raat soya nahi...subah mujhe sone do, neend puri huyi nahi khwab pure hone do...

[@aizajsamani8894]

@@saurabhyadav9698 🤣🤣

[@jagadeeshkishore3242]

this course is really good, focusing on the basics and the individual elements with simple and effective examples

[@Hafijur0211]

🎯 Key Takeaways for quick navigation: 00:00 *🧠 Understanding the basics of the useRef hook,* - The useRef hook in React is useful for creating variables that persist between renders. - State variables trigger re-renders when changed, useRef variables do not. 00:59 *🔄 Controlling re-renders with useRef,* - Changing the value of a useRef variable does not trigger re-renders of the component. - useRef is useful for storing mutable values that do not trigger re-renders. 02:18 *🛠️ Managing state with useRef,* - Using useRef to manage state allows you to control when re-renders occur. - By using useRef for state management, you can optimize performance by avoiding unnecessary re-renders. 03:59 *🔍 Understanding the useRef Hook in React* - React's useRef hook is used to solve problems where components are re-rendered unnecessarily. 06:02 *🔍 Using useRef to Avoid Unnecessary Rerenders* - When using the useRef hook, the component doesn't re-render when the referenced value changes, unlike when using state. 07:11 *🔍 Using useRef to Reference Elements* - useRef can be used to reference elements directly, avoiding the need for direct DOM manipulation. 08:16 *🎨 Understanding the useRef Hook in React* - The useRef hook in React allows for creating references to DOM elements or values that persist across renders. - It's commonly used to access or manipulate DOM elements directly in React, without resorting to direct DOM manipulation. - Refs created with useRef don't trigger re-renders when their value changes, making them useful for scenarios where you need to hold onto a value across renders without causing re-renders. 10:34 *📖 Documentation highlights for React's useRef Hook* - The documentation for useRef emphasizes that changing the ref.current value doesn't cause a component to re-render. - It warns against manipulating ref.current during rendering and suggests using refs when you need to access a value in the DOM that isn't being updated in the UI. - It's recommended to use refs when you want to change a value without triggering a re-render, and you want to persist the value across renders while also updating the UI. 11:58 *🎯 useRef Hook for preserving values during re-render,* - Examples of useRef in action: a click counter that persists value even after re-render, and a stopwatch that uses useRef to store the current time. 12:41 *🕰️ useRef for storing values without causing re-renders,* - Demonstrates useRef to store a timer's start time and an interval reference without causing re-renders, allowing for efficient component updates. 13:11 *🖼️ Advanced useRef usage for managing focus and scroll,* - Utilizes useRef to manage focus on elements without direct DOM manipulation, and demonstrates scrolling an image into view using useRef in React, showing the versatility of useRef in complex UI interactions. Made with HARPA AI

[@areebnadir5778]

00:01 The useRef hook is used to create a variable that persists during re-renders. 02:06 Understanding re-rendering due to state variable changes 03:44 React introduces useRef hook to persist variable values across re-renders. 05:40 The useRef hook allows for persisting a value across re-renders. 07:31 The useRef hook allows direct referencing without DOM manipulation 09:16 The useRef Hook in React allows accessing and manipulating DOM elements. 11:06 The useRef hook in React allows for persisting values across re-renders. 12:52 Referring to elements using the useRef hook in React Crafted by AI.

[@rulersonicboom4737]

Humanity is on it's doom.

[@The-Giggle_Factory-u2c]

Summary The useRef Hook in React is explained in this tutorial from the Sigma Web Development Course. Highlights 🎯 The useRef Hook is a way to access and manipulate DOM elements or values that persist across component renders. 📚 It can be used to create a reference to a DOM element and access its properties and methods. 💡 The useRef Hook can also be used to store mutable values that do not trigger a re-render when changed. 🔗 It provides a way to maintain stateful values without using the useState Hook. 🌟 The useRef Hook is useful for implementing focus management, triggering animations, and accessing previous values. 🖥 This tutorial is part of the Sigma Web Development Course and provides a comprehensive explanation of the useRef Hook in React. 📝 The useRef Hook is a powerful tool that enhances the functionality and flexibility of React components.

[@houseofilm07]

Copy paste 😂😂

[@The-Giggle_Factory-u2c]

@@houseofilm07 auto generate h bhai ai ka 😜 me koi copy paste nhi karta hu

[@amir4ever148]

samaj nahi aya lekin pad kar achcha laga kuch to good work hoga isme 👍👍

[@ketkipatil8309]

nice summary

[@Neelammkw]

Amazing apka dava... nahi guarantee he ..pura samaj me aa gaya.... 😇🥰

[@shakeel_developer-f7x]

CodeWitharry is the best teacher in the world of programming Love you Harry Bhai from Pakistan

[@areebnadir5778]

CodeWitharry Nahi CodeWithHarry 😁😁

[@Hatthetail]

#CodewithHarisAlikhan 🗿

[@AmanKumarSinhaOfficial]

🚀 React OP 🚀 Harry Bhai OP 🚀 Sigma OP 🚀

[@mk_respect48]

Your course > 16laks degree❤ love you from Pakistan You are one of the best teacher of my life❤

[@lakshaymahajan8457]

Your course is damn good and awesome for anyone to learn.

[@Kabirrsaini07]

This course is an addiction❤‍🔥❤‍🔥

[@SAJIDALI-r4j4t]

sir you are the best teacher for normal student

[@suinkueditz]

Bru... Yr me kase thank u khahu yr! 😫...... Bru koi sabd nhi he aapke liye.... Yr.... Thank u for this course Bru..... Agr ye paid rahta to shayad me nhi purchase krta.... Btw u r best Bru... We r always with u...... ❤

[@AbhinavThatipally]

The best ever course with the BEAST instructor!!!!!!!

[@chmalik8610]

Bhaiya ur consistency teaches us how to be consistent ❤❤ bestest web development course ever ♥️♥️ first time itni consistency se koi course Kiya h only becz of u and plss iske baad Java basic se plzzz plzz bhaiya ♥️♥️♥️♥️

[@motivational_speeches__]

Your Course is better than getting the Computer Science Degree in Pakistan....

[@nitinsaxena3082]

Harry Bhai Aap KZbin PE best ho jo free me paid jaisa content even better than paid content provided karte ho only from your videos I'm kinda good in coding right now😊

[@rishabhsharma411]

Thank you so much harry bhai for giving us this amazing course

[@gauravpan122]

hats off to you bhaiya the way you teach and most immportant totally free

[@sameershahidbutta]

Sigma batch aur Harry bhai dono OP hen!!

[@dhrumilpanchal684]

love the way you teach harry bhaiii

[@ds.zubair]

Amazing series Harry Bhai. Continue this series and include all the things in Web.

[@Arnav404]

You have contribute to much in coding community, the more I appreciate you the less it is.

[@mintunath9267]

Harry bhai aap k bideo pai alag hi power hai

[@simarpreetkaur8674]

☺☺🙌🏻🙌🏻harry bhai is more than a bhai for me🥰

[@itsMohak]

Very excellent

[@AIMasteryHub-nz2uy]

You are the best.❤ From Pakistan ❤❤❤❤❤❤

[@Subhash.Jadav19]

Bro please don't get demotivated due to the number of views, you are doing the best job in the world please continue with it and maintain its quality as you have maintained till now, #SigmaBatchOP

[@Shafi242]

Harry bhai , please don't stop posting videos on this Sigma web development course.We are really following sir Proceed sir Please sir

[@SarbJeet-js8tl]

This course >>>>>>> every course on net

[@SubhamAdhikari-kt6fm]

Harry sir thank you for your constant efforts, I'm in 67th video, In 1 week I will catch you.

[@triloki12]

thank you very much sir, You are one of the best teacher my life

[@sandeepmoger8973]

thanks for teaching hooks in such a easy way

[@AhmedRaza-ty7zq]

Awesome video😎😎👍👍

[@B-gmiGamer]

thankyou so much for making this video and i will you the next time bye!

[@FatimaSaleem-s6u]

you explained useRef very well . Thnks alot

[@omgaming6204]

intro is lit🔥🔥🔥🔥

[@avinashrai4369]

Wow samajh mai aa gaya bhaiya🥰

[@Zaynali._]

You are a savior ❤❤

[@MuhammadTalha-ex4id]

Yes you are right, this course is enough

[@codewithnaim529]

#ReactOP 🎉🎉🎉 ❤ Sir You are Awesome ❤

[@theharshbhagat]

Any other use cases of reference? I understand this two:- 1. To persist value 2. To change dom

[@studieswithkartik8532]

best course for web development

[@jai_ram108]

Whoever wants Harry Bhai to create a Full Mern Stack project video , Please like and comment so that it reaches our Harry Bhai. 👇🏼👍🏼

[@rifatraffu2015]

We will also persist with this playlist Harry vai🥰🥰 #ReactOp

[@FrameFablesTV]

loving Your videos

[@r.srobin7260]

This course is realy helpfull for us❤‍🔥

[@nindagaming9303]

Course going great 👍

[@Rishaavv08]

sigma batch op 🔥💣🚀

[@multicreativehub396]

10 million subscriber ho jaye apke jaldi.

[@surajjnv4925]

Harry Bro , 👏👏👏👏such an amazing explanation. #sigma op

[@isheep9025]

11:13 - "he means to say that if you want to display a value in your function component , then dont use ref value because it doesnt get rendered every time it changes unlike state import { useEffect, useState,useRef } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' // import './App.css' import Navbar from './components/Navbar' import Footer from './components/Footer' function App() { const[count,inccount]=useState(0); const first = useRef(0) // useEffect(() => { // // alert("hello from app") // // },[]) useEffect(() => { alert("changed in app") },[] ) return ( {first.current} {first.current=first.current+1 ; console.log(first.current)}}>Update ) } export default App

[@mtv-0-l4q]

Sigma Batch OP🔥

[@Iam_suraj00]

Great Bhai, awesome 🎉❤ thanks

[@Kishanjha_imagination]

✨️Wonderful course and you are helping us very much by providing it for free. There are many who wants to learn but unable financially.

[@ClashBegins]

IF someone has a question that how the value of a constant is changed in "UseRef " here is the answer { In React, the useRef hook is used to persist values across renders without causing re-renders when the value changes. When you declare a constant a using const a = useRef(0), a is a constant reference to the object returned by useRef. This object has a current property which is mutable.}

[@yuvrajkumarsingh4984]

Thanks harry bhai for this couree❤❤❤❤❤

[@GauravRaj-bi9kg]

Good video sigma batch op !

[@apmotivationakashparmar722]

Thank you So much HarryBhai !

[@nomatterff8918]

4:05 Harry bhai why we put the variable in app function, if we put the variable as a global variable it will be solved my problem 🙄🤔

[@nomatterff8918]

I need the answer If anyone knows

[@New-f3o]

This course is Awesome @Harrybhai we learned a lot from you Please add next js in this course

[@SANTOSH_Raut]

Harry bhai, I want you to make videos on why are big companies like google, amazon, Microsoft are doing massive layoffs of IT engineers? is AI somehow the reason behind this or recession the real culprit behind this?

[@SCRETBRO]

Thanks #HarryBhai for #SigmaBatchOp #ReactOp

[@HridoyKhan-nf9le]

Very good tuitorial..

[@ashishnayak6857]

Sigma batch op🎉🎉🎉🎉

[@sushantnamurte16]

Best video 🎉

[@sachinpatel872]

Intro level Dope

[@coder_aj_001]

Harry bhaiya jara hamari baat bhi suno👇.... #Sigma_Web_Deb ke baad #Python🐍 ke missing topics(Numpy💯, Pandas🐼, Matplotlib📈, Ai/ML lib. 📚, etc) bhi 💯 days mai 100% 👨‍💻 complete kardo please 🙏🙏

[@rajnipareek4045]

#ReactOp❤ thanks alot for providing such meaningful content 😊 really loving this playlist, you are amazing sir.

[@bishal928]

Thank you so much for the video

[@AjayKumar-j8s4c]

React Batch OP 🔥

[@cute-zy8zy]

Sigma batch OP❤❤❤

[@muskanchaurasia1532]

#ReactOP Harry Bhai ZindaBaad😁

[@a.k.a.s.h7011]

Thanks for your hardwork.

[@ghimireayuisha5888]

I am learning vue but watching your react tutorial.

[@dcsalim4384]

Quality + Quantity = CWH 🔥

[@Itis_NoBody]

Love From Afghanistan ❤

[@mathswallah933]

SIGMA OP....... BIG FAN

[@saththanikaran7542]

So nice So good just looking like a wow 😅❤❤❤❤ Thank guruji❤❤ #SingmabatchOp

[@ShivamSahu-z3r]

sigma batch op 🔥🔥🔥🔥

[@ahfvastav450]

harry bhai op bolte

[@VK_BRANDING]

happy teachers day sir

[@SabedCode]

We want Next js 🏋️

[@SabedCode]

Mara comment viral hoga kiya

[@shivam90098]

रुको ज़रा सबर(इंतज़ार) करो😅

[@Surendra-ld2le]

❤❤❤❤nice sir ji

[@factkart2754]

aapka course haris bhai paid course se bhi accha h

[@HamzaShahid-s8t]

your web dev course is awesome but we want to complete a full 0 to advanced ML course covering all the basics and advanced techniques algorithms, libraries like tensorflow and much more we will appreciate that, and remember we want theory plus practical ..........i know that you will do this

[@theroyboy5384]

Sigma batch op ❤❤❤❤

[@chlorine-u5g]

sigma batch op react op thanks for this course

[@VivekKumar-gy4hp]

I thank you very much brother👌

[@SyedAlam-z6l]

Greate ❤🎉 Harry bahi react forms pe bhi video banaw please wo mushkil Hain please Achi se samjado from Pakistan Allah apko lambhi Zindagi dy

[@RMRBD]

LOVE YOU BROTHER

[@user-ml1ev]

Harry bhay OP!

[@S-for-Study]

Harry bhai! Kya app react js ke baad next js ko sikhoge? Do you teach us next js after completing react js?🤔

[@rishabhtripathi2685]

Kya useref ka jyada use ni karna chahiye react Project me

[@Undefined_kabir]

Amazing bhaiya you are almost great