शैडोइंग अभ्यास: Learn useMemo In 10 Minutes - वीडियो के साथ अंग्रेजी बोलना सीखें

अभ्यास मोड चुनें

हर मोड पूरी स्क्रीन का अभ्यास कक्ष खोलता है।

139 वाक्य

यदि वाक्य बहुत छोटे या लंबे हों, तो समायोजित करने के लिए Edit पर क्लिक करें।

Hello everyone, welcome back to my React Hooks series, where in this video we're going to take a look at use memo,

how it works, and when you should actually use it.

And if you're interested in diving into React even deeper, make sure to check out my full

React course, which I'm going to link down in the description below.

Have you wanted free web hosting that doesn't suck?

Well you're in luck because today's video sponsor, Atlantic .net, is giving you an entire year -long free trial of their hosting.

And if you use the code

Kyle when you check out, you're going to get an additional $50 of credit that you can use towards whatever you want on the hosting platform.

On top of that, this hosting platform has powerful servers with great data reliability

and redundancy so you know that your site is going to be there and running with the data you want it to.

So make sure you use the code

Kyle in the link down in the description below to get your free hosting.

Welcome back to Web Dev Simplified.

My name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this.

Now to get started, I just have some really basic boilerplate code set up for us to test our application.

I'm going to walk through it real quick so you know exactly what we're doing.

I just have a simple single component called app, which has two pieces of state.

One is a number, which we can control by this input over here on the right.

And the second one is a Boolean for dark or light, which is toggled by this change theme button on the right side of our screen.

Then what we do is we have a function which doubles our number, so just multiplies by two, but this function is very slow.

If I scroll down here, you can see I just have a really long for loop

that just loops doing nothing for a really long time to emulate what would happen in a really slow, long -running, complex function.

Obviously, since this function just multiplies by two, all this code is doing is making the function really slow.

And if I change this number, for example, by clicking this up arrow, you're going to see it takes about a second,

half a second for it to actually double the number.

So you can see this function is quite slow to execute.

Now continuing onward, we just have a variable here,

which is taking this dark boolean and changing if we have a dark or light theme down here.

And then lastly, over here, we just have the output code which changes our number

when we update here and also toggles our theme when we click this button.

So that's just the basics of our code

and you may think okay this is fine code it's working great

and the slowness is you know not that bad

but it only is going to be slow when we update our number but actually that's incorrect thinking.

If we click our change theme button you're going to notice we have the same delay.

I'm going to click

it now you can see it takes about half a second

to a second for it to actually change the actual theme

and the reason for that is because when you update state in React, it's going to re -render your entire component.

So it's going to run this entire function from top to bottom,

which means that this slow function gets called every single time that we render our app component.

So whether we're changing the theme, whether we're actually updating the number here, or whether some other component is causing this component to re -render,

you're going to be forcing it to go through that slow function over and over and over again.

And this is a really big performance problem when you have these slow functions that don't really change that often.

So React has a built -in way to solve this with a hook which is called use memo.

So we can import this use memo hook just like this.

And memo here stands for memoization, which essentially is the idea of caching a value so you don't have to re -compute it every single time.

So in our example, this slow function here takes an input of number,

and it's always going to give us the same output every time we give it the same input.

So we can cache that input value number and the output it gives us.

That way if the number doesn't change we don't have to recalculate our slow function over and over and over again.

And the easy way to use this is we just call use memo and we're going to pass it in a function.

And this function is going to be the thing that we actually mem -wise.

So this is the thing that we're caching which in our case is going to be this slow function.

We just want to make sure we return this slow function here, get the result from it.

And then just like all of the other hooks that we talked about like useEffect for example, we're going to have a list of dependencies here.

And in our case the only dependency of this is going to be our number here.

Our number is the only thing that changes.

And when our number changes we need to rerun the code inside this useMemo hook

but if our number doesn't change we don't need to rerun this slow function code.

So with that one simple change let's save and see what happened to our app.

It's loading over here we can change this to for example one

and you can see it has a kind of delay change it up again it's going to have a delay.

When we click change theme you're going to notice this is instantaneous I can click it as much as I want to.

And that's because when we go through our code, we click change theme, it causes our component to re -render.

So it calls this function, does all this stuff, and it gets down to use memo.

And it says, well, our number is exactly the same as what it was last time.

So we're not going to recall this slow function here because we already know what the result is.

It's the exact same thing as it was last time.

So we're saving ourselves from having to recalculate this number with the slow function,

and we only are forcing ourselves to do this when we actually update this number inside of our input here.

So we're essentially only running this slow code when we have to, and not running it when we don't actually need to.

Now this seems really nice, and you may think, let me just use memo everywhere, why not just memwise everything?

Like this theme styles here, why don't I memwise that based on this dark boolean variable?

And the reason you don't want to memwise everything is because it does give you some performance overheads and some memory overhead.

For example, this use memo function must be called every single render of your component.

So you're calling an additional function.

And also it's saving the value, this previous value in some memory variable.

So you're forcing your memory to get larger every time you use memo

because you have to store an additional variable in memory to store that previous value.

Now this isn't a huge deal.

But especially where you don't need it,

it's going to cause additional memory usage and additional performance problems when just not using it would have been better.

So I highly recommend you only use memo in this case when you actually need the performance benefits, when the function you're calling is incredibly slow.

Then use memo is great.

But there's also a second use case for use memo, and that is something called referential equality.

And if you aren't really familiar with value versus reference in JavaScript.

I have a video on that topic I'll link in the cards in description.

But essentially what that is saying is when you try to compare two different variables in JavaScript,

it's going to compare their reference in the case of objects and arrays.

So for example, this theme styles here is a specific object.

And if I were to duplicate this theme styles, for example, theme styles two right here,

you would think that theme styles and theme style 2 are equal to each other, but in JavaScript they reference different objects.

They have the same values in the object, but the actual reference to the object itself is different.

So these two values are actually not equal to each other, which is something really important.

And as you know, inside of hooks in React, we have this array here of all of our dependencies, and when our dependencies change,

it's going to rerun our hook.

So let's take a quick example where we have a use effect

100

and we want to run this use effect every single time that our theme styles here changes.

101

So we're just going to have a really simple console .log

102

theme changed and down here inside of our dependencies I'm going to have our theme styles.

103

Let's just get rid of this console down here and of course we need to make sure we import use effect

104

just like that.

105

And now if I just really quickly inspect this page here, pull this over, go to the console,

106

you can see we get our theme changed being printed out.

107

And when we change our theme, you can see it's continually printing out theme changed.

108

But a problem you'll notice if I clear this out is when we change our number, it's also causing this theme change to be run.

109

And the reason for that is that referential equality.

110

What's happening is every time we run our function, we get a new theme styles object being created.

111

And this new theme style object is not the same as the old theme styles, even though they have the exact same values in the object,

112

they reference different places in memory.

113

And that's really important to know.

114

So in order to make sure that we only ever run useEffect when our theme style object actually gets re -updated, we can use memo again.

115

So what we can do is wrap this in a use memo, make sure you pass it a function,

116

and in here we're just going to return that object.

117

We just indent all this properly, and in here for our dependencies we're just going to put

118

that dark variable because that's the only thing that this object depends on.

119

Now if we were to rerun this you can see a change in our theme causes this to update our theme, logs it out, but

120

when we change our number you're going to notice we don't actually get anything printed in our console

121

and only when we click change theme.

122

And the reason for this is that now we are wrapping this object inside of memorization.

123

Essentially, if our dark variable doesn't change, we don't re -update our theme styles.

124

So we get the exact same reference as we had the previous time we rendered our app.

125

So now our use effect is comparing our old theme styles with our new theme styles, but they both reference the exact same object.

126

So these are the two big use cases for use memo.

127

The first and most obvious is when you want to make a slow function,

128

wrap it in this use memo so that it doesn't recompute every single time you render your component,

129

and it only computes when you actually need the value from that function since the input's actually changed.

130

The second use case, which is a little bit trickier, is this idea of referential equality.

131

Whenever you want to make sure the reference of an object

132

or an array is exactly the same as it was the last time you rendered if none of the internal workings changed,

133

you're going to want to use memo here to make sure

134

that you only update the reference of

135

that object whenever the actual contents of the object change instead of updating every single time you render.

136

And that's all there is to the use memo hook.

137

If you enjoyed this video, make sure to check out my full react course linked in the description to get a full overview of everything

138

you need to know about react.

139

Thank you very much for watching and have a good day.

ऐप डाउनलोड करें

धाराप्रवाह बोलने के लिए ज़रूरी सब कुछ

AI उच्चारण स्कोरहर वाक्य का स्कोर

IPA अभ्यासहर ध्वनि में महारत

शब्दावलीअपना शब्द भंडार बनाएँ

शब्द गेमखेलते हुए सीखें

QR स्कैन करें

Download on theApp Store Get it onGoogle Play

उसी चैनल से

Learn Next.js Parallel Routes In 16 Minutes

Business EnglishUniversity StudentsWorking Adults

FOR YOU

अनुशंसित वीडियो

184 वाक्य

इस पाठ की शब्दावली और बोलने के सुझाव

यह स्पीकिंग पाठ वीडियो “Learn useMemo In 10 Minutes” पर आधारित है। सबसे ज़्यादा दोहराए गए शब्द ये हैं: theme, function, memo, slow, object। इस वीडियो में शैडोइंग के लिए 139 वाक्य और 2166 शब्द हैं। बोला गया हिस्सा 10:41 लंबा है। वक्ता तेज़ बोलता है, लगभग 203 शब्द प्रति मिनट, इसलिए जुड़ी हुई और कमज़ोर ध्वनियाँ ज़्यादा मिलेंगी। 87% शब्द अंग्रेज़ी के 3,000 सबसे आम शब्दों में से हैं, इसलिए शब्दावली आसान है।

इस वीडियो की मुख्य शब्दावली

वीडियो के 15 सीखने लायक शब्द, उच्चारण और अर्थ के साथ:

शब्द	उच्चारण	अर्थ
hook संज्ञा	/hʊk/	अंकुश, आंकड़ा
dependency संज्ञा	/dɪˈpɛndənsi/	निर्भरता
console संज्ञा	/ˈkɑn.soʊl/	कंसोल
compare क्रिया	/kəmˈpɛɚ/	तौलना
delay संज्ञा	/dɪˈleɪ̯/	देर, विलंब
equality संज्ञा	/ɪˈkwɑ.lɪ.ti/	समानता
wrap क्रिया	/ɹæp/	लपेटना
loop संज्ञा	/luːp/	कुंडली
import संज्ञा	/ˈɪm.pɔɹt/	आयात
topic संज्ञा	/ˈtɑpɪk/	प्रसंग, विषय
server संज्ञा	/ˈsɝvɚ/	सर्वर
solve क्रिया	/sɒlv/	सुलझाना, हल करना
suck क्रिया	/sʌk/	चूसना
log संज्ञा	/lɔɡ/	कुंदा, लट्ठा
usage संज्ञा	/ˈjuːsɪd͡ʒ/	लौकिकता

इस वीडियो का व्याकरण

वक्ता जिन संरचनाओं का सबसे अधिक प्रयोग करता है, वीडियो के असली शब्दों के साथ:

संरचना	वीडियो में
Passive voice be + past participle — ज़ोर इस पर कि क्या होता है, न कि कौन करता है	is toggled · is called · must be called
Relative clauses who / which + उपवाक्य — व्यक्ति या वस्तु के बारे में अतिरिक्त जानकारी	app, which has · light, which is · hook which is

ध्यान देने योग्य उच्चारण

वक्ता 48 बार संक्षिप्त रूपों का प्रयोग करता है, जैसे we're, you're, don't। इन्हें वैसे ही छोटा बोलें जैसा आप सुनते हैं।

“sh” और “zh” की ध्वनियाँ: essentially /ɪˈsɛnʃəli/, cache /kæʃ/, referential /ɹɛfəˈɹɛnʃəl/, memoization /ˌmɛmoʊaɪˈzeɪʃən/, memorization /ˈmem(ə)ɹaɪˌzeɪʃn̩/
लंबे शब्द — बलाघात सही रखें: dependency /dɪˈpɛndənsi/, essentially /ɪˈsɛnʃəli/, equality /ɪˈkwɑ.lɪ.ti/, incredibly /ɪŋˈkɹɛdɪbli/, continually /kənˈtɪnjuəli/

हिंदी भाषियों के लिए मुश्किल ध्वनियाँ:

/v/ और /w/ का फ़र्क़ — /v/ में ऊपर के दाँत निचले होंठ को छूते हैं, /w/ में होंठ गोल होते हैं: variable [ˈvæɹ.i.ə.bl̩], equality /ɪˈkwɑ.lɪ.ti/, overhead /ˈəʊvəˌhɛd/, server /ˈsɝvɚ/, solve /sɒlv/
/z/ — इसे “ज” (/dʒ/) न बनाएँ: memoization /ˌmɛmoʊaɪˈzeɪʃən/, memorization /ˈmem(ə)ɹaɪˌzeɪʃn̩/
शब्द की शुरुआत में s + व्यंजन — पहले “इ” न जोड़ें: sponsor /ˈspɒn.səː/, scroll /skɹoʊl/

इस वीडियो से अभ्यास कैसे करें

पहले बिना बोले पूरा वीडियो एक बार सुनें और जो शब्द नहीं आते उन्हें लिख लें।
0.75× गति से शुरू करें, एक-एक वाक्य की शैडोइंग करें, और सहज लगने पर सामान्य गति पर लौटें।
अपनी आवाज़ रिकॉर्ड करें और मूल से तुलना करें, ख़ासकर hook, dependency, console जैसे शब्दों पर ध्यान दें।

शैडोइंग तकनीक क्या है?

शैडोइंग (Shadowing) एक विज्ञान-समर्थित भाषा सीखने की तकनीक है जो मूल रूप से पेशेवर दुभाषिया प्रशिक्षण के लिए विकसित की गई थी। विधि सरल लेकिन शक्तिशाली है: आप मूल अंग्रेज़ी ऑडियो सुनते हैं और तुरंत इसे ज़ोर से दोहराते हैं — जैसे वक्ता की छाया 1-2 सेकंड की देरी से। शोध से पता चलता है कि यह उच्चारण सटीकता, स्वर, लय, जुड़ी हुई ध्वनियाँ, सुनने की समझ और बोलने की प्रवाहशीलता में काफ़ी सुधार करता है।

शैडोइंग तकनीक: पूरी चरण-दर-चरण गाइड पढ़ें →

शैडोइंग अभ्यास: Learn useMemo In 10 Minutes - वीडियो के साथ अंग्रेजी बोलना सीखें

अभ्यास मोड चुनें

ऐप डाउनलोड करें

Learn Next.js Parallel Routes In 16 Minutes

10 Essential React Native Tips Every Developer Must Know

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

The easy way to keep your repos tidy.

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Use these CSS features instead of JavaScript

Video

Go’s Big Mistake

Getting ADDICTED to STUDYING is Easy, Actually

Give me 31 minutes, I will make PyTorch click forever

The future unfolds! How to optimize Android apps for adaptive layouts

How I Learned Procedural Generation

Learn Java in 14 Minutes (seriously)