Skip to playerSkip to main content
  • 7 weeks ago
🎯 What You’ll Learn Today
✅ Understanding Performance Optimization in React
✅ useMemo Hook – Memoizing expensive calculations
✅ useCallback Hook – Optimizing callback functions & preventing unnecessary re-renders
✅ useReducer Hook – Advanced state management (alternative to useState)
✅ Difference between useState vs useReducer (when to use which)
✅ Real-world examples & implementation in small projects

Category

🤖
Tech
Transcript
00:00Okay, so today we will discuss our hooks, use, memo, use, callback, use reducer.
00:15This is our additional hook.
00:17We will discuss our additional hook, which we will discuss.
00:23The last thing we discussed was the context API.
00:30I hope that we can share our data in multiple components.
00:37We can share our data in multiple components.
00:40We can share our data in multiple components for this year .
00:57We can share our data catalog data there.
01:01In multiple components, we had an infrastructure link link in ourixa Tibas Index account.
01:06So we will discuss anderes in domains.
01:08Click your stuff, click your search enter your support for this section.
05:53foreign
06:15foreign
06:21This is my name.
06:22Okay.
06:23Now we are going to print this initial value here.
06:26Here we are going to print this value.
06:28How do we put curly braces here?
06:30Because we are going to put JSX format here.
06:32So here we are going to put NUM INC.
06:35When I click this button,
06:37your value is going to increase.
06:38When you click this button,
06:40here we are going to put on click.
06:42On click on function,
06:43handle increment.
06:45Handle INC.
06:46This function I have created.
06:48And this function I have created.
06:50So you have created.
06:52Handle INC function.
06:53This function is called handle INC.
06:56Handle INC function.
06:58Now this function is called create.
07:00Now this function is called NUM INC.
07:03You have set NUM INC.
07:05So this function is called NUM INC.
07:07I will put on here.
07:09So this function is called NUM INC.
07:11You have to put this function here.
07:13If you look at increment,
07:14you will increase.
07:15Here will be clear.
07:17I hope that you will clear.
07:19One time,
07:20I will see your comments.
07:21What are you doing?
07:22Then we will do.
07:23Then we will do.
07:24UG Gaming.
07:25Yes sir.
07:26Prop drilling and context API clear.
07:28And
07:29Struggle
07:32will this class recording be provided later?
07:36Yes.
07:37Yes.
07:38Yes.
07:39Yes.
07:41Yes.
07:42This recording will be available tomorrow, tomorrow you will get a link to the recording.
07:46If you have a workshop, you will get a recording of this recording.
07:49And if you have a YouTube channel, you will get uploaded all the classes on YouTube.
07:53Just like this, you will get uploaded.
07:55Tension is not available, all the things you will get.
07:58Just like this, you will provide.
08:01Okay, sir, recording will be.
08:05Recording will be live class.
08:07Live will be shared with you.
08:09If you have a doubt, you will be able to ask this.
08:12Recording will be able to see it when you practice this.
08:15It will be able to see it in the recording.
08:17So, we will discuss the use memo.
08:23So, here we will be incrementing.
08:26So, we will make a value.
08:29We will make a tag tag.
08:31We will make a value state.
08:34So, we will make a value state.
08:36Now, we have to make a value state
08:38I will filter all the updates.
08:39we will make you method,
08:41okay,
08:57.
09:04.
09:16.
09:17.
09:18.
09:19.
09:20.
09:21foreign
09:27foreign
09:39foreign
09:49foreign
09:50I am going to add increment here I have a decrement.
09:53Perfectly.
09:54Now, this is the difference.
09:58I have a function.
10:01I have a function.
10:04We are talking about this function and this function is called multi-value.
10:14multiple value
10:44So, here is value, which means we can print it.
10:45So, here is value.
10:46We can print it.
10:48We can print it.
10:51So, we can add curly braces.
10:53And, this function is multi value,
10:55this multi value function,
10:57we can print it.
10:59Now, here we can increment.
11:01So, here we can increment.
11:04Here we can increment.
11:061 minute.
11:08What?
11:09call
11:16call
11:18call
11:18call
11:20call
11:23call
11:34state variable को here pass
11:37कर रहा है और multiply होके return value
11:39करने वाला है अगर आप
11:43यहाँ पर समझ पा रहा है जैसे मैं है आप डिक्रीमेंट कर रहा हूं
11:45तो इससे कोई मतलब नहीं है आप कोई value change नहीं होगी
11:47लेकिन जब आप increment कर नहीं हो एक यह आपका
11:49multiply कर रहा है यह आपकी multiply value आ रही है
12:04foreign
12:34multi-value function
12:36see here
12:38inspect
12:40console
12:42refresh
12:44multi-value function
12:46here
12:48component
12:50component
12:52increment
12:54one update
12:56here
12:58function
13:00state variable
13:02number
13:04increment
13:06here
13:08multiple
13:10function
13:12here
13:14function
13:16function
13:18function
13:20function
13:22function
13:24function
13:26function
13:28function
13:30function
13:32functions
13:40function
13:42function
13:44function
13:48memory
13:50use memo hook
13:52here we will use memo hook
13:54through
13:56here we will call
13:58use memo hook
14:00use memo hook
14:02use memo hook
14:04where has your use memo hook
14:06react
14:08here we will use memo hook
14:10first argument
14:12callback function
14:14second dependency
14:16you
14:44Memorized value written
14:46करके देता है
14:46अब Memorized value
14:47written करके दे रहा है
14:48तो अगर कोई भी
14:49value written होके आती
14:50तो आपको इसको
14:50store कराना पड़ता है
14:51किसी के अंदर
14:52तो यहाँ पर
14:53अपन एक variable में
14:53store करा लेते हैं
14:54जिसको मैं यहाँ पर
14:55करेता हूँ
14:55Memo value
14:58जी कहा है
14:58Memo value करके
14:59मैंने यहाँ पर
15:00अपना variable create करा
15:02इसमें store करा लिया
15:03अब इसको अपन
15:03यहाँ पर print करा देते हैं
15:05मैं यहाँ पर कहता हूँ
15:05कि अपनी
15:06Memo value को
15:07यहाँ पर print कर देना
15:08वही सेम काम है
15:09बस अपनने
15:09use Memo के अंदर रखा
15:11अपने उस callback function को
15:12तो यहाँ पर
15:13अब देखो अपना काम हो रहा
15:14या नहीं हो रहा
15:14एक बार के लिए
15:16refresh कर लो
15:17आपका multi value function
15:18यहाँ पर work कर रहा है
15:19आपने increment करा
15:20increment पर आपका
15:21increment value return होकी
15:23नहीं आ रही गया
15:23ठीक है
15:26यह function अपने पास
15:27यहाँ पर है
15:28अपने इस Memo value को
15:41यहाँ पर print कर दिया
15:42और
15:43एक बार के लिए
15:44refresh करो
15:45आपका multi value function
15:46यहाँ पर work कर रहा है
15:46increment कर रहा हूँ
15:48तो आपका increment पर
15:49वो work करना चाहिए था
15:50Memoized value आपकी आनी चाहिए थी
15:51लेकिन नहीं आ रही
15:52क्यों क्योंकि
15:53आपने इसको यहाँ पर
15:54pass करना पड़ेगा
15:55किसके update होने पर करवाना है
15:56आपको num increment के
15:58तो यहाँ पर dependency में
15:59अपन पास करेंगे
16:00अपने num increment को
16:01मैंने यहाँ पर pass कर दिया
16:02num increment को
16:03एक बार refresh करो
16:05आपने decrement कर रहा है
16:06कोई दिक्कत नहीं होरी
16:07increment कर रहा है
16:07आपका यहाँ पर function work कर रहा है
16:09मतलब
16:10यहाँ पर यह memorized value
16:12आपकी return करके दे रहा है
16:13कब जब आपका num increment
16:14यहाँ पर update हो रहा है
16:16उसके अलावा आपके page में
16:17कितनी भी state update हो
16:18उसको उस function से कोई मतलब नहीं है
16:20जब मतलब है
16:21तब ही वो function यहाँ पर work कर रहा है
16:23आपका यहाँ multiple
16:25जो multi value वाला function है
16:39का connection है
16:40तो अपन उस function को तब ही use लेंगे
16:42जब अपने को उससे जरूरत है
16:44बार-बार अगर वो अपने पास
16:45यहाँ पर call होगा, render होगा
16:47अपने component के साथ
16:48हर एक state के साथ
16:50तो performance तो weak होने वाली है
16:51तो उसका solution अपने पास कहा है
16:53अपना use memo hook
16:54यहाँ पर use memo hook का use
17:09तो basically अपने components पर
17:11जो भी side effect होते है उसके लिए use लेते है
17:13use memo क्या करता है आपको
17:15memorized value return करके देता है
17:16तो यहाँ पर आपकी memorized value return होके आ रही है
17:19तो यहाँ पर वो complete आपकी
17:21memorized value return होके आ रही है
17:22इसका मतलब इस memo value के अंदर जब
17:25memorized value return होके हैगी जब आपका
17:27num increment यहाँ पर
17:28यह state update होकी क्योंकि आपने
17:30dependency में उसको pass कर रखा है
17:32यह अगर आपकी state update होती है तो आपका यह
17:34value return करके देने वाला है function ठीक है
17:36तो यह अपने पास होता है अपना
17:38use memo hook जो आपको
17:41memorized value return करके देता है
17:43यहाँ तक की चीज समझ मैं ही तो
17:45एक बार comment करके बताओ कि yes sir
17:47यहाँ तक की चीज के लिए रहे अपना आगे बढ़ सकते है
17:49ठीक है चलो वाई
17:53क्या comment कर दिया आपने
17:55STM कह रहे कि live में video break होकर
18:10चल रहा है नहीं है ऐसा तो कुछ नहीं है
18:13इसमें problem हो रहा है वीडियो हमें
18:15रुक रुक के चल रहा है अभी live ही रहेगा पूरी class में
18:19break हो रहा है break हो रहा है पूरा
18:22last response आ रहा है सर जी
18:25yes breaking yes breaking up
18:27सही तो है bro
18:29मुझे last screen show हो रहा है
18:33कुछ issue आ रहा है क्या
18:34और जिए पिन करे कि sir
18:39youtube channel पर class क्यों नहीं चल रही है
18:41youtube channel पर class चलेगी एक बार
18:43अपना youtube वापस तो आए
18:44youtube से कुछ mistake हुई है youtube से chat चल रही है
18:49team उससे proper chat चल रही है regular
18:51बस वो review पर
18:53review पर होने के बाद अपना youtube channel वापस आ जाएगा
18:56वाइस क्लियर है बट visibility breaking ओके यस सर वाइस क्लियर है बट screen लेट हो रही है
19:08ओके refresh करो बट video ही break हो जाता है
19:11हाँ video break हो रहा है मज़ा नहीं आ रहा है screen सहीं नहीं चल रही video break यस सर video रुक रुक के चल रहा है
19:18यह क्या इश्यू आ रहा है कि नैट वर्क भी में भी पर्फेक्ट ही होगा इसा तो कोई इश्यू नहीं आना चाहिए था
19:36नैट इस्पीड पर्फेक्ट आ रही है फिर क्या इश्यू हो रहा है screen भी शेयर है आप सभी को
19:48वाइस क्लियर है video break
20:18करें कि यह एप ही बेकार है नहीं ऐसा तो नहीं है इसे बहुत क्लासेज लिए मैंने ऐसा कुछ शीशू नहीं आता और मैंने सब कुछ चेक कर लिया है फिर भी मैं इक बार और चेक कर लेता हूं
20:34ठीक है video
20:48कि अगरे की सर आपने जो भी पड़ाया वोईस आ रही है
21:16है बट स्क्रीन लेट है कुछ भी टाइम पर शूर नहीं हुआ
21:22कि स्क्रीन शेयर पर्फेक्टली है
21:28कि अब पस्री शेयर कर देता हूं मैं आपको स्क्रीन
21:46कि अगरे कि आप जो राइट कर रहे हूं
21:52लिखाई नहीं दे रहा बाद में पुरा लिखाई दिख रहा है
22:00अच्छा ऐसा इशू आ रहा है क्या
22:02अच्छा ऐसा कुछ नहीं हो सकता है
22:10यूट्यूब को मेल करें
22:12सभी यूट्यूब चैनल को आपस लेने के लिए
22:14नहीं यह जिस चैनल को भेजा गया है
22:18उस चैनल के थुरू हम ही चैट कर रहे है
22:20तो आज आएगा ऐसा कोई इशू नहीं है
22:22यूट्यूब से कोई मिस्टेक हुई है
22:24रिव्यू करने में
22:26तो अब वो पूरा प्रॉपर रिव्यू होगा
22:28उसके बाद आने में टाइम लग जाता है
22:30क्योंकि यूट्यूब बहुत बड़ी जगह है
22:34बहुत बड़ा प्लैटफॉर्म है तो वो इतना जल्दी
22:36मानता नहीं है
22:38वो इन चीजों पर फोकस नहीं करता कि आप अच्छा काम
22:42कर रहे हो या नहीं कर रहे है
22:44उनका यह रहता कि एक बार पूरा हम रिव्यू करेंगे
22:46उसके बाद ही अब आगे एक्शन लेंगे
22:48तो अपन
22:50सिर्फ बात ही कर सकते हैं उनसे
22:52टीम से और
22:54यूट्यूब से बात हुई है तो बहुत जला जाएगा
23:08आप सब दुआ करो कि जल्दी अपना यूट्यूब चनल आए
23:10टाकि अपनी क्लासेज रेगूलर जैसे बिलकूल परफेक्ट-तरीके से चल रही थी आपको महजा भी आ रहा था
23:16क्लासेज में वैसे सारी चीजह होती रहे
23:18so that we can complete the course and then we can start the process
23:24so
23:26this is the way we can do it
23:29because we can delay the course
23:31so we can prepare all the course
23:34and complete the course
23:48पर चालिस ही मिनिट लाइव होता है कि नहीं तो जूम पर ही होता ना सर अजूम पे 40 मिनिट की ही मिलती है इसलिए अपने इसक्रीपपर कर रहे है अज डुआ मैं भी कर रहा हूं बहुत जल दाये और दुआ के साथ साथ बातचीत भी चल रही है यूट्योब के साथ
24:18Thank you very much.
24:48Thank you very much.
25:18Thank you very much.
25:48Thank you very much.
26:18Thank you very much.
26:48Thank you very much.
27:18Thank you very much.
27:48Thank you very much.
28:18Thank you very much.
28:48Thank you very much.
29:18Thank you very much.
29:48Thank you very much.
30:18Thank you very much.
30:48Thank you very much.
31:18Thank you very much.
31:48Thank you very much.
32:18Thank you very much.
33:18Thank you very much.
Be the first to comment
Add your comment

Recommended