- 5 months ago
Today’s Learning Outcomes
By the end of this session, you will be able to:
Understand performance optimization in React.
Use useMemo for memoizing expensive calculations.
Use useCallback to optimize callback functions and prevent unnecessary re-renders.
Master useReducer for advanced state management.
Understand when to use useState vs useReducer.
Implement real-world examples in small projects.
By the end of this session, you will be able to:
Understand performance optimization in React.
Use useMemo for memoizing expensive calculations.
Use useCallback to optimize callback functions and prevent unnecessary re-renders.
Master useReducer for advanced state management.
Understand when to use useState vs useReducer.
Implement real-world examples in small projects.
Category
📚
LearningTranscript
00:00:00तोफिने को आज डिसकस किने वाले है वही सारी थीज्यातक करें अठीक है
00:00:30में बिसंतक है अपने उस धूसे के साथ यूजू सब्सक्राइब करके में भी के इस बिनदियों है कि फ्रूर्छ से अनुटनाफ के साथ
00:00:57तकि यह में कुछ राया है तो आपनेशपो शॉल करेंगे
00:01:24करैंग है तो सब सब्सक्राइब
00:01:54को फिर ब्राइब कर लिए घ्ल दिशे मैं यहां पर राइब को चेंज कर लेता हूं दिश्ट कि उन्ट लिखते चाहिए
00:02:05अब आप लिखता है यहां को दिए अब इस तो सब्सक्राइब
00:02:24यह बिल्कुल इंस्तार्वना है जरी प्रूज्जट्नमें की नियुक्तर एस्टिंग और अपनी यह पीकल अपनी नियुक्ट पूरी एक्ट ने पर आपने दुन और के साथ में किसमें आज़ा तो अपने प्लेस्टिंग के अंदर आ जाता है और यांकट इंस्तौर्ण
00:02:45और में आपर स्टोर्में करेंगता हूं तो यहां पर अपने अंपने इस्टॉर्ल करें उन सेम सारी इडिए पने फोलो करता है तो वह सारी इडिए पने आपर फोलो करता हूं
00:03:15तो अन्याओ उन्याओ ढ़ले शारी इसे कुछ इडं़ पहर को सबदाल्य में एन हो यहां से वहां से डिए टो सब्सक्राइब आ गरा हुआ करता है तो अन्याओं ऊझाओ करता हूं
00:03:45तो यां को आना को अध्यां कुम सहिंगे भूदे एधिन हो उपली को यह कुम उलते सह उज तब स्वित औ्यु को आना कुम एफ ऐगला है
00:03:58तब की ओभ नोग, आनकी ऑना धो आन्युमान को क्या तुर को अंध्यों को इभ दो
00:04:02akis एप इपन कौ, सब आना को आना को आना कhow
00:04:07उत फञर्स को से लियुत विए, तो जडिक्सको से लिएंगर से ल EVERY 심 lên हो से लिए
00:04:18टेरी की हैं और समेंको Biz Play को करेंगे अब करेंगे और क्या है कि यह
00:04:30हैं अब अब का नहीं है जिसक्किन फिल्ट क्यों से कंणोड में कौतовा है ??
00:04:37यह हो यहां तक की चीज़े जो है वो बिल्कुल प्रक्तिकली जलगी वाइस सब्सक्राइब करके नहीं है, वो इसके नहीं है, वो इसके नहीं किल से हैं रही है, ठीक है
00:05:07एक बार इसको चेंज करके देखते हैं, मैं भी फूरा सा� our solutions हो, ठीक है
00:05:16आप सबी jeito कैसी आ रही है ? कुप एक बार आप आप सभी रेस्पोन सब्सक्राइ एक रही है
00:05:32आप जो मेरी वो इस आ रही है वो बिल्कुल कॲियर आ रही है यो नहीं आ रही है कि यह active
00:05:37करें कि यह सब्सक्राइब करें कि यह सब कुछ परफेक्ट है
00:05:54जैसे बैटर है मतलब यह कहना चाहिए आप
00:06:06तो देखो यहां पर अपने यूज मैमो के पर अपन वापस डिसकस कर लेते हैं
00:06:27यूज मैमो बेसिकली अपने को मैमोराइज वैल्यू रिटन करके देता है
00:06:30जैसे मालनो यहां पर अपने यहां पर कोई भी स्टेट अपन लेते हैं
00:06:37अबने जैसे एक S2 tag लिया और उस S2 tag के अंदर अपने कोई भी state यहां पर ले ले लेता हूं यहां पर अपने अपने यहां पर बलाया यूज इस तेट को अपने यहां पर लेके आ जाते हैं और इनिशली मैं आपर zero sign कर लेता हूं उसको अपन यहां पर
00:06:52अपने अपने को एक error return करके देता है और इसको क्रियेट कर लेते हैं और इसके अंदर अपनी के लिए प्लेंट कर दो
00:07:13index.css अपने हटा देते, app.css पर आ जा जा और इसको भी यहां पर blank कर दो, ठीक है, यह दोनों चीज़े blank कर देते, तो normally UI अपने को दिखाए देगा,
00:07:21तो use memo, जिसमें अपने को यहां पर zero print को क्या रहा है, जिक है, तो यह use state को अपने प्रेंट कर आए, basic सी चीज़े, अब यहां पर अपने एक button लगाते है, मैंने यहां पर एक button लगाया और इस button के अंदर अपने यहां पर कहते है, कि जब अपने इस button पे click करे, जब अपने इस
00:07:51तो यहां पर अपन लगा देते अपना on click और on click पर पास कर देते है अपने handle counts को, ठीक है, तो जब इस button पर click होगा तब अपनी count की value यहां पर क्या होनी चाहिए, increase होनी चाहिए, और increase कैसे होगी, यहां पर अपने set count को, और set count के अंदर में कहा देता हूँ, कि मेरा count है, उसको �
00:08:21एक और अपन number ले लेते हैं, जैसे मैंने यहां पर ले लिया, 80, ठीक है, 80 मैंने आपर initially number दिया, अपने use state के अंदर, और इसको अपन यहां पर create कर देते है, const करके, यहां पर अपने return करके लिया बना लिया, ठीक है, यहां पर मैं कहा देता हूँ, num, then second अपन कहा देता है, settle
00:08:51लिया है, इसी के साथ अपन यहां पर एक बटन ले लेते हैं, मैंने यहां पर एक बटन लिया और बटन के अंदर अपन यहां पर कहा देते हैं, click, जैसे अपन इसके उपर click करेंगे, तो अपने पास यहां पर क्या होना चाहिए, यह आपके numbers, decrease कैसे होंगे, जब आप इस �
00:09:21function को यहां पर create कर लो बटन जल्दी से आके, यहां पर function बनाए, कौन सा है handle, nums करके, handle nums का function अपने यहां पर create कर दिया, अब यह function क्या करने वाला है, जो आपके num है, उनको decrease करने वाला है, तो यह किस के basis पर करेगा, set num के basis पर, यहां पर अपने set num को बला लेते हैं, और अ�
00:09:51यहां तक की चीज के लिए है तो इससरी यहां तक की चीज के लिए है
00:09:57अब देखो अपने को आगे क्या करना है अपन यहां पर यूज डूरू जो अपना होता है वो क्या कामाता है
00:10:20अब ही देखो मैं यहाँ पर एक फंक्शन बनाता हूँ बेसिकली ज्यादा तर इसी चीज के लिए यूज लेते हैं कि कोई भी स्टेट अपडेट होने पर अपना अगर कॉंपोनेंट के अंदर कोई भी फंक्शन बना हुआ है तो वह अपने पास यहाँ पर लेटे मिनेट ग
00:10:50करिका
00:10:51के आप सा जाता है अब यहां पर मेरे पास क्या है यह अपन ने इक � Figureको Calling मनाथे हैं यहां परielt है a
00:11:00करेंने के इहां नहीं करने वाला पृटि कि यह primary यहां पने पास क्रक्शन के अंदर क्या रहन कर और Quebec करें
00:11:16अब इस function के अंदर क्या होने वाला है?
00:11:18जो भी आपके नम आ रहे हैं, उसके अंदर अपन 10 को add करने वाले हैं.
00:11:21कि मेरे पास जो भी नम आ रहा है, उसके अंदर आप क्या कर देना?
00:11:24प्लस कर देना 10 को.
00:11:25और उसी के साथ आप इसको यहां पर क्या कर देना?
00:11:27इतना सा काम अपने करा और उस use memo hook के अंदर अपने उसको print भी करवा दिया.
00:11:33मैंने बोला कि मेरे पास यह जो add function है, उसको मैंने यहाँ पर call करा दिया, तो इसका output अपने पास यहाँ पर print हो जाया रहा.
00:11:39चिक है, तो इसका मतलब यह जो num है जब भी update होगा, तो उसके अंदर अपने पास 10 add होके आने वाला है, और यहाँ पर आपके action tag के अंदर वो update होने वाला है.
00:11:50चलो वाई, अभी के लिए आपके पास यहाँ पर अगर आप इसको refresh करते हो, तो यहाँ पर आपका 80 है, यहाँ पर आपका 90 है, क्योंकि वो 10 add करके यहाँ पर दे रहा है, फिर से आपने क्लिक करा, तो यहाँ पर 79 है, 79 में 10 add करा, 89, यहाँ पर क्लिक करा, 78 में 10 add करा, 88, जै
00:12:20एड़ फॉंक्शन चीए तो यह बात हो गई चलो यहां पर अपने इसको रण कराते हैं और यहां पर अपने पास यहां पर प्रिंट हो रहा है अपने इस पर क्लिक कर रहे हैं
00:12:40अच्छा रिटन के
00:12:50रिटन के बाद में करा उसको रिटन के पहले करवाओ रिटन के पहले करवाओ रिटन कर दी वैल्यू तो फंक्शन वहीं पर कतम होगी अपना उसकी डेफिनिशन वहीं पर कतम होगी तो यहां पर आओ अब अगर आप इसको रिप्रेश करते हो परस्स ताइम आपके पास आप
00:13:20उसको relate कर रहे हो, ठीक है, क्योंकि उससे related है, क्योंकि जब भी आपका num update होगा, तो num के update होने पे आपका ये जो function है, ये आपको यहाँ पर return कर रहा है, आपके num की value के अंदर 10 को add करके, जब भी आपका num update होगा, लेकिन दिक्कत ये है, कि जब आप इस पे click करो, जब आप इस
00:13:50requirement सिर्फ कब है, जब मेरे पास मेरी num update हो, मेरे को count से तो कोई इसका मतलब ही नहीं है, count का तो कोई reason ही नहीं है, यहाँ पर, लेकिन count के update होने पे भी, मेरा ये जो function हो रन हो रहा है, तो यहाँ पर अपने performance क्या होती है, कम होती है, तो अपन performance को enhance करने के लिए, performance को better करने के �
00:14:20लेकिन जैसे मालो 10 state है, 100 state अपने बना दी, तो अगर 100 state update होती है, और सिर्फ इसी से related है वो function, तो 100 state के update होने पे वो function बार-बार क्या होगा, call होगा, अब बार-बार call होगा, तो उसका कोई काम भी नहीं है, फिर भी call हो रहा है, तो वहाँ पर अपने पास अपनी performance भी कू�
00:14:50यहाँ पर use memo को बला है, यहाँ पर use memo आपका कहां से आता है, react से आता है, अब यह जो use memo बला है, इसके अंदर दो argument आते, एक तो function, दूसरा आपका dependency, मतलब किस state के update होने पर आपको उस function को call करवाना है, तो यहाँ पर यह जो function बनाया है, add वाला अपन इसको यहाँ पर pass कर �
00:15:20value return करके देता है, और कौन से value देता है, memorized value return करके देता है, तो यहाँ पर अपन कहा जाते है, memo value, एक memo value करके मैंने यहाँ पर एक variable बना दिया, इसके अंदर आपके memorized value return होके आने वाली है, और वो कब return होके आने वाली है, जब आपकी कोई state update होगे, अब आप किस state के update होने पर
00:15:50आपके memorized value आ रही है इसको आप यहाँ पर प्रेंट पर प्रेंट करवा दो आप बोलोगी कि मेरे पास जो memo value आ रही है उसको मैं यहाँ पर प्रेंट करवा रहा हूं ठीक है तो देखो आप इसका solution अपने पास यहाँ पर हो चुका है
00:15:59मैं यहाँ पर refresh करता हूँ आपका hello I am a add function फस्टाइम रन होगा क्योंकि आपका app.jsx यहाँ पर रन हो रहा है चलो अच्छी बात है आपने यहाँ पर इस पर क्लिक करा इस पर क्लिक करने पर यह स्टेट जब अपडेट हो रही है तब आपका यहाँ पर जो add वाला function है वो यहा
00:16:29ठीक है तो यहाँ पर यह जो use memo है यह इस function के साथ memorize value देने वाला है कब जब अपने पास यहाँ पर अपनी num update होगी है आप चाहते हो कि count update हो तब यह काम हो तो count को भी आप यहाँ पर पास कर सकते हो पॉमा करके ठीक है तो अभी तो सिर्फ मैं नम के उपर बोला हूँ जैसे
00:16:59में मोग होता है आई हो कि आपको आज यूज में मोग के उपर अच्छे से समझ में आया है अगर यहां तक की चीज के लिए तो एक बार कमेंट करके बताऊ कि यह सरी चीज के लिए तो अगे बटते हैं दल ठीक है
00:17:16कि अ कि अ
00:17:26कि अधियर प्रोस आए सर कैसे हो शर बिल्कुल एकडम बढ़ी है सर और सई एकडम एक
00:17:36कि अ
00:17:40कि अ
00:17:44कि अधिक है इस्क्रें बिल्कुल पर्फेक्टली वीजिवल होगी मेरे इसाब से
00:17:50कि
00:17:56कि अ
00:18:26जो यह तो बात होगी है अपने पास किसीच की अपने यूस
00:18:54अब विदा कुपोरेंट को यहां पर तो यहां पर अपने करेंट कर दिया
00:19:11ओर इसके अंदर आमने कजब से और यहां पर आपने साइड चाहिकुत है जिरेंट
00:19:17चाहिल कॉंपोनेंट तो यहां पर अपने चाहिल कॉंपोनेंट के अंदर इसको रेंडर करवा देते हैं यहां पर अपने चाहिल कॉंपोनेंट को यहां पर रेंडर करवा देता हूं मैंने यहां पर बोला मेरा जो चाहिल कॉंपोनेंट है उसको आप यहां पर रेंडर कर दे
00:19:47कि यह मेरे पास कौन सा है यह मेरे पास मेरा child component है यहाँ पर बोल दिया यह मेरा child component यहाँ पर है तो यहाँ पर जब आपका app.gsx यहाँ पर render होगा तब आपका child component render होने बाला है चलो बाई बहुत अच्छी बात है बिल्कुल यहाँ पर child component आपका render हो रहा है first time लेकिन जब आप
00:20:17है तो जब यह situation आती तो इसका solution अपने पास होता है memo से अपने चाइल
00:20:23component को इसका solution है memo के थूरू रैप कर दो मतलब आपका जो चाइल
00:20:27component है वो बार-बार यहां पर रेंडर हो रहा है तो आप इसको memo के थूरू रैप
00:20:30कर दो तो यहां पर आप बुला लो अपने memo को मैं यहां पर रैप कर देखा है इतना सा काम कर तो
00:20:45जहां पर आपने एक्सपोर्ट डिफूल कर रहा है मतलब जहां से आपका export हो रहा है तो यहां पर अपने
00:20:50पास import हो रहा है वो memo के अंदर wrap होके आ रहा है अपने पास ठीक है तो यहाँ पर अब refresh करके देखो आप फर्स
00:20:56time आपका child component यहाँ पर render होने वाला है कोई दिक्कत नहीं है जब आप इस state को update
00:21:00कर रहो आपका child component यहाँ पर render नहीं हो रहा है यह तो होगा क्योंकि इसको तो आपने यहाँ पर पास कर रखा है अब देखो यहाँ पर आपने इसका solution कर दिया लेकिन difficulty कहां आती है जैसे मालो आपने memo के थूर रैप कर दिया अब आपके पास यहाँ पर जो कोई भी function है वह आ�
00:21:30मैंने आपर some task करके function बनाया और इसके अंदर अभी कुछ ही नहीं लिखता मैं आपर कहता हूं कोई भी some task कि यहाँ पर आने वाला है यह कहते हूं मैं ठीक है यह जो some task function है यह मैं किसके अंदर बेज रहा हूँ अपने child component के अंदर तो इस function को अपन बेज देते हैं अपने child component
00:22:00कर दो
00:22:30तो यहाँ पर जो अपना चाईल कॉंपोरेंट है
00:22:39इस चाईल क्यंपोरेंट के अंदर अपन इस function को पास कर दे civils चलन इस ऐपका Train
00:22:53आपका some task यह लोगाई. मैंने some task को यहां से विए दिया child component के अंदर.
00:22:57अब आपका memo यहां पर work नहीं करेगा. अब दिखो यहां पर क्यों work नहीं करेगा.
00:23:00refresh कराओ. आपने click करा तब भी आपका child component render रहा है. आपने इस पी click करा तब भी आपका child component render हो रहा है.
00:23:07फर्स टाइम तो रेंडर होगा जब आपका app.jsx रेंडर होगा तब आपका child component यहाँ पर रेंडर होने वाला है
00:23:12कोई दिखकर नहीं है लेकिन जब आप यहाँ पर किसी भी state को update करो तब आपका यहाँ पर child component रेंडर हो रहा है
00:23:18कोई performance वाला issue हो आगया फिर से अपन चाहते है कि जब यह अपने पास child component अपन किसी particular state के update होने पर अपन इसको call कराना चाहते है
00:23:27तब ही यह call होना चाहिए है तब अपन यहाँ पर क्या करते है यह जो function आपने भेजा है इस function को ना भेज के अपन यहाँ पर
00:23:35memorized जो अपने पास यहाँ पर होता है function जो अपने पास यहाँ पर use callback के थरू रेटन होता है वो अपन बेज देए और particular किस state के update और अपने child के अंदर क्या काम होने वाला है
00:23:45वो उसके basis पर अपन यहाँ पर अपने memorize function को अपन बेज दे
00:23:49ताकि वो function भी वहाँ पर काम आए और उस state की update होने पर जो भी value जा रही है
00:23:53वो अपने child component में चली जाए तो इसका मतलब यह जो आपने काम किया है
00:23:57यह ना होके यहाँ पर यह काम होगा अपने use callback के थुरू
00:24:01ठीक है use callback को मैंने यहाँ पर बुला है
00:24:04अप फर्स्ट अपने पास argument होता आपका function callback function
00:24:07second यहाँ पर होता है आपका dependency
00:24:09callback function होता है तो मैं इसी function को यहाँ पर pass कर देता हूँ
00:24:12दूसरा function मनाना ही कीजेगे
00:24:13यहाँ पर अपने इसको pass कर देते हैं
00:24:15और इसको यहाँ पर अपन expression function में convert कर दें
00:24:18यह function आपको जाने वाला है
00:24:20second अपन यहाँ पर dependency pass कर देते
00:24:22यहाँ पर मने dependency pass कर दी
00:24:23और यहाँ पर अपन इसको assign कर देते
00:24:25एक variable के अंदर
00:24:27आपका जो callback यहाँ पर use callback है
00:24:29यह आपको यहाँ पर memorize function
00:24:31return करके देता है वही
00:24:33तो यहाँ पर अपने इसको एक variable में assign कर लेते हैं, मैं आपर कहता हूँ memo, fun करके अपन यहाँ पर एक variable में assign कर लेते हैं, तो यह आपको एक memorize function written करके दे रहे हैं, ठीक है, तो यहाँ पर यह जो आपने some task बेज़ा है, इसको some task को ना भीज के आप बेजने वाले हो अपना memorize function, �
00:25:03आपका यहाँ पर child component render नहीं होने वाला, आप चाहते हो कि जब मेरा यह count update हो रहा है, तब मेरा child component render हो, क्योंकि इसके basis पर मैं child component के अंदर कुछ काम करवाने वाला हूँ, तो अपन यहाँ पर क्या करेंगे, इस dependency के अंदर अपन उस state को pass कर देंगे, जिसके update होने पर आपका
00:25:33क्योंकि इस particular state के update होने पर अपन चाहते है कि अपना child component render हो, ठीक है, अपने इसको update कर रहे है, नहीं हो रहा आपका child component, मैं सिर्फ इस particular state पर कुछ काम करवाना चाहता हूँ, अपने child component में तो अपना child component यहाँ पर render हो रहा है, ठीक है, तो यह अपने पास क्या होता है, यह अ
00:26:03यहाँ तक की चीज के लिए रहे, तो एक बार comment करके बताओ कि यह सर यहाँ तक की चीज के लिए रहे, फिर अपना आगे बढ़ता है, इसके अपने आज सभी को यह चीज के लिए रहे, कि अपना use callback और use memo hook क्या काम आता है, और important है,
00:26:32क्योंकि कुछ ही important hooks है, जो आपने सारे discuss करें, जैसे अपने use state discuss करा, अपना use effect अपने discuss करा, अपना use callback अपने discuss करा, use ref अपने discuss करा, use memo अपने discuss करा, अब जो next hook के अपन यहाँ पर discuss करने वाले, वो अपने पास है अपना use reducer, ठीक है,
00:27:02झाल झाल
00:27:32झाल झाल
00:28:02तो इस चीज पर आपन यहां पर डिस्कस करा
00:28:12आई होग कि आपको समझ में आया और हर्चुन कह रहे
00:28:15किलियर सर्थ
00:28:17एमडी अपरोज कर रहे मुझे सही से नहीं आया
00:28:20समझ उपर उपर से गया देखो
00:28:22यहां यहां पर आगे डिसकस करें अपने जो रिड्यूसर हुक है
00:28:52उसके उपर अपन यहां पर डिसकस करते हैं
00:28:53कि अपना यूज रिड्यूसर हुक अपने पास यहां पर क्या काम आता है
00:28:57तो अपना आते है अपने यूज रिड्यूसर हुक के उपर
00:28:59ठीक है यह अपना एडिशनल हुक है
00:29:01अब आप बोलोगे कि सरी, additional hook का मतलब क्या, यहाँ पर जो अपना use reducer है, अपना additional hook है, मतलब यह अपने state management के लिए ही काम आता है, जैसे अपना use state काम आता है, अपने state management के लिए, लेकिन जब complex state management की बात आती है, तब अपन वहाँ पर use लेते हैं, अपना use reducer hook, ठीक है, वहाँ
00:29:31यहाँ पर सर्च करते हैं, और अपन react की documentation पर आता हूँ, यहाँ पर use reducer पर आते हैं, तो यह जो अपना use reducer hook है, यह अपने पास अपना additional hook है, ठीक है, अब देखो, यहाँ पर use reducer के अगर बात करते हैं, तो किस तरीके से अपने पास use reducer अपने पास created है,
00:29:53अब useReducer में एक तो अपने पास अपना reducer आता है
00:29:57एक अपने पास initial argument आता है
00:30:00एक initial अपने पास यहां पर आ रहा है
00:30:02और वो ही अपने को यह एक array written करके देता है
00:30:04जिसमें अपने पास एक state variable होता है
00:30:07और एक अपने पास function होता है
00:30:09चीज है, जो अपने पास अपना use state होता है, बस दोनों में difference है,
00:30:14चीज है, क्या difference अपने उस चीज को समझते हैं,
00:30:16तो चलो अपन यहां पर use reducer पे वो अपना counter वाल अपन example यहां पर करते हैं,
00:30:21ताकि आपको clarity मिले उस चीज के अंदर, चीज है,
00:30:39चीज है, जो अपन यहां पर discuss करते हैं, इसके उपर use reducer के उपर,
00:31:04ठीक है, same counter वाल अपन यहां पर example देखेंगे,
00:31:07use reducer के दुरू, बाकि सारे complex state management अपन use reducer के दुरू कर सकते हैं,
00:31:12जैसे counter वाल अपन यहां पर देखेंगे, और इसने क्या example दे रहा है,
00:31:17अपन इसका example देखेंगे, इसने में भी counter ही दे रहा है, इसने age को यहां पर decrease करवा रहा होगा,
00:31:23यहां पर increase करवा रहा होगा, ठीक है, increase और decrease दोनों काम करवा रहा है,
00:31:26देखो यहां पर use reducer को किस तरीकी से अपने use लेते हैं,
00:31:29मैं यहां पर आい जाता हम और यहां पर अपने ईक नया component बना लोते हैं,
00:31:33और उस component का name अपने इहां पर कह देता है,
00:31:35इपना reducer.gs.
00:31:47यहां पर कर देते हैं अपना reducer hook जिसके उपर यहां पर discuss करने वाले तो यहां पर कर देते हैं अपने app.gsx के अंदर यहां पर आ जाओ इस div को मैं कर देता हूं comment और अपन जो काम करने वाले सिर्फ उसी के उपर आ जाओ
00:32:08अपने comment कर दिया लेकिन issue किस चीज़ का रहा है issue आ रहा होगा आपके बाकी चीज़ों का ठीक है नहीं तो एक बार काम करो सारे चीज़े हटाई दो और यहां पर वापस से create कर दो इसको सारी नहीं अटाते है आपको provide करना दर दो भी है directly नीचे कर लेते हैं अपनको issue लिए मै
00:32:38अपने reducer वाले component को यह पर render करा दिया तो आपका reducer भी है निचमेंट कर देता और यहां पर
00:33:08पर कह रहले पर कर दे है लेकिन यहां पर करने वादे उद्ध
00:33:20छीप साइखता वाले है
00:33:27काम किसके थिरू होगा अपने आपने यूजर रेड्यूसर को
00:33:32तो जल्दी से आ giờो आपन समझते हैं यूजर रेडियूसर को
00:33:36ठीक है यहां पर सबसे पहले अपन क्या करेंगे अपने यूज रिड्यूसर हुग को इंपोर्ट कर लेते हैं यहां पर आ जाओ और अपना यूज रिड्यूसर जो हुग है उसको अपन यहां पर बुला लेते हैं कहां से आता है रियक्ट से ही आता है एडिशनल हुग है यह �
00:34:06जिस से कर आप इसकि डॉक्मेंटेशन देखोंगे इसना यहां पर पंपे रखा है कि आपका जो यूज रेडिूसर हो कर घाल रोकए उसमे एक तो टो रिडिवूसर पंक्षेन आता है एक पर प्हूर्टकर एक पर क्रियाट
00:34:29और सेकंड अपने पास यहाँ पर आती अपनी इस्टेट लिए
00:34:48के अपने निहां पर पनी इस नायवाल यह उपन da रहता है एक अपने पास के आती Krunya
00:34:56तो ने सब्सक्राइब करते तो लिए इस
00:35:03कि अपने पास यहाँ अपर ने शूर कर लियुष और एक अपने पास यहाँ आब
00:35:18यहां पर वे लिए वनपन यहाँ पो इसको भी असाइन करते मैं आपठ internet
00:35:25टीक है इनैशेयल स्टेट में अपने यहां पर दे रही है यहां पर एक उब heavy aपने एक
00:35:44इसने यहां पर इनिशल स्ट सेट को राट करी के मतलब एकम पर एक यहां
00:35:49एक राक्वाट बना के पास कराऊती अब इस अफने यह पास एक तो
00:35:55तो पते बाते हैं अपने पास यहां पर आती है
00:35:59यह बात पर अपने पास यह पंड यह ऑपने बास नहीं
00:36:19बिस्पैच मैं हापर कह रहा हूं तो यह जो स्टेट है यह कहां से आने वाली है आपकी इनिशल स्टेट के अंदर और इनिशल स्टेट में कहा हूं कि तो अपन यहां पर इसको प्रिंट करवा देते हैं मैं यहां पर कह रहा हूं कि मेरे पास जो स्टेट आ रही है मेरे पास �
00:36:49तो यहां पर जीडो पर करता हूं जैसे है मैं यहां पर कहता हूं जैसे टिक है इसके अंदर अपने पास क्या आता है एक तो रिद्यूसर फंक्शन आता है और एक अपने पास
00:37:18इनिशल स्टेट आती है, इनिशल स्टेट कहां पर असाइन होती है, जो आपका एरे रिटर्न होके आता है, उसके अंदर जो स्टेट वेरिवल है, उसमें आपकी इनिशल स्टेट असाइन होती है, उसमें आप ऑब्जेक्ट भी दे सकते हो, एरे भी दे सकते हो, ठीक है, अप
00:37:48यहाँ पर इसने एक्जांपल यही दे रखा है और इसने यहाँ पर reducer function के अंदर यहाँ पर एक तो अपने पास किया आता है?
00:37:55फस्ट parameter में state आता है, सेकेंड पर एक्षन आता है.
00:37:58अभी यह state और action क्या काम आता है? रहो इस चीछ पर भी पर discuss करते हैं.
00:38:02पहले मैं यहां पर एक काम करता हूँ, यहां पर अपने काम करते हैं, अपना जो reducer function है, उसमें अपन करते हैं, एक तो parameter आता है अपने पास state, और एक अपने पास क्या आता है अपना action, ठीक है, अब यह जो state है, यह क्या है, और यह action जो है, यह क्या है अपने पास, देखो, अ
00:38:32तो अब भी अगर आपने count को et pass कर रहा है तो यहाँ पर आपका et assign हो रहा है लेकिन action क्या है?
00:38:37action आपके पास जब भी आपने dispatch को use करोगे तो इस dispatch के साथ कुछने कुछ action अपन यहाँ पर भीजने वाले है जैसे मालो मैंने बोला increment करवाना है मैंने बोला decrement करवाना है तो यह action अपन यहाँ पर hit करवाने वाले है अपने dispatch के साथ और dispatch के अंदर जो भी action आने वाली है वो आ�
00:39:07तो चलो पन यहां पर इसको समस्ते थोड़ा सा आगे बढ़ते इसके अंदर अपने को यहां पर क्या करना है मेरे को यहां पर
00:39:31इंक्रीमेंट करवाना है और इंक्रीमेंट के से करवाना है जब मैं इस बटन पर किपकर पहले अपर इंक्रीमेंट वाला घॉटा है इस enemies करेने की स seulement यहां И
00:39:53और इस handle click function के अंदर dispatch के अंदर इसने value गीज़ दी कि आपको increment करवाना है या पर decrement करवाना है ठीक है
00:39:59यहाँ पर इसने वह काम किया तो वही सेम काम अपन यहाँ पर करते है इसका complete code यहाँ पर इसने यह रहने वाला है इसका
00:40:07छीके इसने आरिकर डिश्पैज के अपर अपने पर आपने पास एक फंक्शन आता तो यहीं पर में एक क्या बदा लिए और उस लुब्म
00:40:31मतलब आपने यूज रियूस का जो लिया इस डिस Laura के साथ आपका एक जाएगा जिसके अंडर
00:40:59type जाने वाला है increment और यह जो dispatch है यह हिटो का आपके
00:41:04reducer function के उपर और आपके action के अंदर वो argument आने वाला है
00:41:08एक बार के लिए console कर वालो पिसको अपने action को console कर वालो
00:41:12ताकि आपको clarity मिले कि क्या प्रू चल रहा है ठीक है
00:41:15तो मैं यहाँ पर action को यहाँ पर console कर वाला रहता हूं
00:41:18और अपने पर चेक करते हैं inspect में आके क्या चल रही है चीज़े
00:41:21एक बार के लिए refresh कर आओ अब देखो मैं increment पर क्लिक करता हूं
00:41:26तो मेरे पास यहाँ पर type क्या आ रहा है increment मेरे पास यहाँ पर आ रहा है
00:41:30टाइप अपने पास यहाँ पर increment आ रहा हैं अपने किसके अंदर action के अंदर
00:41:33ठीक है
00:41:34यहाँ पर जब मैं क्लिक नंटर आ। अपना dispatch यहाँ इहाँ पर work करा है
00:41:46और जब अपना dispatch work करता है तो अपना Rep desser function अक्पर यहाँ चाहँ अपने पास action के अंदर
00:41:53जो भी dispatch आपका value लेके आने वाला है जोबी dispatch आपका
00:41:57argument लेके आने वाला है व्हों पर आने वाला है इस reducer के अंदर तो
00:42:01is reducer में action पर अपने maintenry पास अपने argumen्ट आने वालान है उस
00:42:04argumen्ट को लिए आपकर एक्सेस कर सकते हैं इतनी जिवात है यह we
00:42:10यहाँ तक की चीज समझ भग हैं कि आप सबीको एक बड़ यहाँ तक की चीज के लिए तो यहाँ तब कमेंट करके बताओ कि यहाँ तक की चीज के लिए यह रहे
00:42:16कोई बड़ी चीज नहीं है विल्कुल एजी है यह अपना एडिशनल भुक है यह
00:42:21इसे के साथ आज की अटर्नेंस का कुशिन फरस्ट बताता हूं मैं आज की अटर्नेंस का कुशिन फरस्ट क्या है
00:42:46कि अटर्नेंस की कुशिन फरस्ट में आपको मैंचन करना है रियक्ट करना है यह इसे कम्टी में आपको फार्म शेर किया हूए उसके अंदर आपको
00:43:11को जी एक्ट मैंशन करना है टेंटेंस की कुशिन के अंदर पॉइंट वन है पॉइंट तो मैं आपको आगे बताने वाला है अब इसे पॉइंट वन आपको फिल करना है नेक्स अपने अगे चलते हैं करवा के देखते जल्दी से अपने इनिशेल एस्टेट जब आपका यहा
00:43:41करवाना है जो आपने इनिश़ सेट के अंदर कॉंट को पास का तक है तो जब भी अपने पास आएज़ यहाँ पर अपना Teレ
00:43:52करा रहा है अब यह जो इसजे दこれは काउंट आऽ्यां को से प्लस बम आए पस इतना सा काम अपने को इह रहा
00:44:02जैसे आप इसका code देखों कि इसने सेम यहां पर काम कर रहा है यहां पर कोई बोल रहा है कि
00:44:06अगर action.type अपने पास यहां पर क्या आता है अगर action.type यहां पर
00:44:11implemented इस आता है तो उसके basis पर आपको यहां पर क्या करना है
00:44:15age जो है उसको state.age जो आ लिए उसको plus one आप यहां पर कर देना यह इतना सा काम
00:44:21यहां पर कर रहा है बने एक काम करते है इसका थोड़ा सा change करते है
00:44:25pattern change कर लेते है switch statement क्या अपने पढ़ा था क्या
00:44:29switch statement के basis पर मैं यहां पर काम करते हो mãi यह आपर ऐसे न गहर करके मैं ढगए मैंने यहां पर
00:44:33एक क्या लगाया क्या अपना switch statement लगाया कि पर बनाते है अपने
00:44:47और खी कि अंदर अपन यहां फास कर देते किसको अपने action को कि यह action
00:44:54आपने पास यहां पर आ रहा है जू भी एक्षिन आएगा उसके बेसिस पर अपने पास ऐने का होने वाला है और इंक्रिमेंट कीस पहला रहा लाँ है
00:45:23और उस object के अंदर मैं यहाँ पर कहा देता हूँ
00:45:25कि मेरे पास जो count है
00:45:27ठीक है मेरे पास जो count है
00:45:29उसके अंदर आपको क्या करना है
00:45:30जो state है
00:45:32उसके अंदर जो count आ रहा है
00:45:35उसको आप यहाँ पर क्या कर देना
00:45:37plus one कर देना
00:45:38मतलब जब आपका increment
00:45:41यहाँ पर जो argument है
00:45:43action जो है वो hit होने वाला है
00:45:45तब आपको क्या करना है
00:45:46आपके count की value को यहाँ पर
00:45:48plus one करना है
00:45:49चेक करें हो रही है या नहीं हो रही
00:45:51मैं यहाँ पर increment करता हूँ
00:45:53और
00:45:54कुछ तो
00:45:57हूँ गया
00:45:58count undefined बता रहा है
00:46:00कुछ तो बढ़ बढ़ करती है
00:46:01यहाँ पर देको
00:46:02count अपने हाँ पर दिया है
00:46:04ठीक है
00:46:04perfect
00:46:06इसने किस तरीके से कर रहा है
00:46:10यहाँ पर
00:46:10each दिया और state के अंदर
00:46:12dot each
00:46:13count अपने हाँ पर लिया
00:46:28और count की basis में कह रहा हूँ
00:46:30कि जो भी count है
00:46:31उसमें जो state dot count
00:46:34अपने पास यहाँ पर आ रहा है
00:46:35उसको आप यहाँ पर क्या कर देना
00:46:37plus one कर देना
00:46:38perfect
00:46:38की तो है
00:46:39यहाँ पर अपने count बुला
00:46:57count में बुला
00:46:58state
00:46:58state में dot count
00:46:59अपने पास जो आ रहा है
00:47:00इसको आप यहाँ पर प्लास वन कर देना
00:47:02सबकुछ perfect ही तो है
00:47:03यहाँ पर अपने बुला count
00:47:04count की वेल्यू एटी है
00:47:06ठीक है
00:47:07इंक्रीमेंट अपने पास यहाँ पर जाना चाहिए
00:47:10इंक्रीमेंट अपने यहाँ पर बोला
00:47:11spelling देख लेना
00:47:12सब्सक्रीमेंट को यहाँ पर पास कर रहते हैं
00:47:16ठीक है
00:47:18इस कंसोल को मैं यहाँ से अटा रहता हूँ
00:47:20switch statement अपना work करेगा
00:47:22जिसमें पहला case अपने पास यहाँ पर चलने वाला है
00:47:25और इंक्रीमेंट पर रेटन करने वाला है
00:47:27एक object जिसमें count है
00:47:28काउंट के अंदर अपनी हाँ पर कह रहे
00:47:30state.count को आपनी हाँ पर क्या कर देना
00:47:33प्लस बन कर देना
00:47:34ठीक है
00:47:36सब कुछ सभी तो है
00:47:38आपर आओ
00:47:40एक बार के लिए रेफ्रेश करो और
00:47:42इंक्रीमेंट कराओ और यह बोल रहा है
00:47:44टाइबर इंक्रीट प्रोपर्टीज ओपन डिफाइन रेलिंग काउंट
00:47:49इस तो भी स्टील करिए
00:47:51है
00:47:54है
00:47:56है
00:47:58है
00:48:00स्टीट मैसे डॉट काउंट
00:48:03स्टीट यहां पर कह दो
00:48:10स्टीट मैसे डॉट करके अपना काउंट यहां पर आ गया
00:48:25यहां पर अपन करते हैं इंक्रीमेंट तो और फिर से चक करते हैं
00:48:29कि स्टीज की यहां पर यह दे रहा है
00:48:31स्टीट मैसे डॉट करके अपने यहां पर अपना
00:48:38इाका। यूब थायोत प्याउड़ यहु सोंग से तंसाना प्याई हैं से अपेड़ फिर इन निवडने तक अप्यांने दिए हैं
00:48:59लिए गार टेह कि अवाई कि अप्यां डदी आप
00:49:04इया चाहर में यPac-node in एफको एहां पर डालिकली बास करते हैं ज़ाओ रिए बास करदोुकर इस अबच्टैएभीड को यहां पर स्ब्सक्त सिर्चीב कि पा स्टेकर द इस-बचयश्यत
00:49:22यहां पर डालिकली पास करते हैं घर पने उस ओगहाँ और हिएओ
00:49:31और इसको हटा दो जिए को डाइरेक्टली पास कर दिया मेने हाब आतिक्टम मैं कुस्त कर रहे है पनगा को धिए आंडग क्रीजियीलडर काउंच जिए व met
00:49:52आपको पंडा है विए इसको ब्रेक कर वादते हैं इसके पार आपने इसको ब्रेक कर वादते हैं
00:50:21एक बार के लिए टेपोज वाली वाली हो नटा दो इतना सा काम मत करो यह वाला सान तो ठीक है जो एक्षिन है वह ही टोगा उसके बेसिस पर जो भी होने वाला है वह पर आओ और चेक करो इसको एक्रिमेंट उस तो मिस्टेक कर रहे है पर नद रहे है
00:50:51है यह वाली ऐस गुझ कर आसिफे इतलग कर दो इस तोで
00:51:01पुर्थे पस्स.
00:51:18अच्छा जो आपका एक्षिन आ रहा हुँ है इसके अंदर आपका एक्षिन के अंदर जो आ रहा है वह अपकर ऑप्चेक आप यहां पर पेज़़रो जिसमेंसे आपको डॉट करके टाइप निकालना पड़ेगा तो उसको इंक्रीमेंट का पता नहीं चलदा है तो यहां पर
00:51:48पर हो जायगा ठीक है तरती यह है कि अपन यहाँ पर जो एक्षिन ले रहे थे dhp
00:52:06यहाँ पर क्या करेंगे इसी बटन के उपर अपने लगाया अपना अन्क्लिक उपर अपना एक फंक्शन
00:52:17है ठीक है है यहाँ पर लगा तैपना डिस्पैच और दिस्पैच के
00:52:25अपना टॉटिक है और टाइप की अंधर इस करेपना
00:52:41शिंप पांच मिनटेज दाफ इसमय है
00:52:45झाल
00:52:46झाल
00:53:15कर दो
00:53:45झाल झाल
00:54:15झाल झाल
00:54:45झाल
00:55:15झाल
00:55:45झाल झाल
00:56:15झाल झाल
00:56:45झाल
00:57:15झाल
00:57:45पाच मिन्ट का वेट करने की बोटा था आप सभी को
00:57:50की आपने इंक्रीमेंट कराया वैसे यहां पर डिक्रीमेंट भी करवा के देखें
00:57:56जबीच सभी की सटाइब यह तो अच्छी चल रही है
00:58:03पतर्षपि तुर्व और तो यहां पर अपने सी को पूरा कंप्लीट करते हैं जैसे अपने इनक्रिमेंट करा है वैसे यहां पर डिक्रिमेंट भी करवा
00:58:20करवाल हुआ है यह अपने यहां पर क्या करवा रधिक ट्रिमेन्ट खैक है तो यहां पर रपर एक्षिण
00:58:41करेगा तो अच्शंक होगा एक्ष्न में आएगा अगर here SATS कौन सा
00:58:47decrement वाला तो decrement पर काम करवाद हो गई तो यहां पर आपके दो case
00:58:52और case में पर क्या करने वाले कि अगर मेरे पास यहां पर decrement जो है statement आता है
00:59:00उसके basis पर आपको क्या करना है उसके basis बस return करवाना है और क्या return करवाना है
00:59:04जो आपका count है, उस count के अंदर आपको क्या करना है, जो state के अंदर अपने पास count आ रहा है, उसको आप यहाँ पर minus one कर देना, ठीक है, इतना सा काम आप यहाँ पर कर देना, और इसको यहाँ पर break भी करते वे चलना, इसको break कर देना, और इसको भी आप यहाँ पर break कर देना, इ
00:59:34पर increment हो रहा है तो यह बात हो गई अपने पास किसकी अपने यूज
00:59:40reducer hook की जो अपना additional hook है ठीक है जो भी अपने पास complex
00:59:48state management की बात आती है वहाँ पर अपने यूज reducer hook
00:59:51यूज लेते है वैसे तो अला कि डेडक्स के चुरू सारा काम हो जाता है
00:59:54यह अपना additional hook है तो आपको पता होना चाहिए कई बार
01:00:00इंटर्वीव में पूछ लिया जाता है कि additional hook जो है अपना
01:00:03use reducer उसके बारे में बताओ तो आपको पता होना चाहिए ठीक है क्योंकि
01:00:07अगर आप react में master करना जाता है तो आपको react की हर एक
01:00:10चीज पता होने चाहिए कई चीज है जो आपको अपने अगर इसमें cover नहीं करी तो वो
01:00:16interview जो series आ लिए उस interview series में सारी चीजे रियेक्ट से related मैंने वहाँ
01:00:20पर cover कर रखी है तो आप वहाँ से गूत्रू करोंगी उस चीज को तो जैसे अपना
01:00:25चैनल आता है उसके बाद उसके उपर सारी interview series अप्लोड होना शुरू हो जाएगी वहाँ से आपनी
01:00:30interview series explore कर सकते हो और interview के preparation कर सकते हो उस series के साथ ठीक है
01:00:36अर्जुन करें कि reducer का कहा यूज आता है reducer का यूज आता है अपनी state management के लिए
01:00:44लेकिन complex state management के लिए अपन यूज लेते है ठीक है
01:00:48complex state management के लिए अपन यहाँ पर अपने use reducer hook का यूज लेते है
01:01:06ठीक है आई hope आप सभी को समझ गया है और आज की class का point two क्या है आपको point two बता जाता हूँ
01:01:13class का point two क्या है आज की class का जो point two है वो अपने पास यहाँ पर रहा रहा रहा यूज
01:01:19reducer hook ठीक है तो आपको point two के अंदर mention करना है यूज reducer
01:01:25same syntax लिखना है use reducer ठीक है syntax क्या लिखना है same यह रहा अपना syntax use फिर उसके बाद r capital और
01:01:36reducer ठीक है तो यहाँ पर camel case है camel case के अपने हैं यह आज का point two है अगर आपको कोई भी डाउट हो तो अपने
01:01:47आपके डाउट मेंचिन करो जो भी आपके डाउट है तो फिर अपना आज की class अपनी रखते हैं बाके फिर अपन कल वाली class में
01:01:52discuss करेंगे आगे के topics के उपर आगी की चीज़ों कर अपने डिसकस करने वाले कल वाली class के अंदर नहीं है
01:01:59कर
01:02:17कर दो अपने कमेंट को अपने करो अपने डिसकस करते हैं नहीं तो अपन आज की ग्लास अपनी रखते हैं फिर अपने कलवाली class के अपने अपने
01:02:38आप आज कि सरु रीकॉडडिट सेशन बहुत लाइग होकी चल रहा हाँ kल वाला अकना जो रिकॉडडिर सेशन था वो सही नहीं था
01:02:57कि यूट्यूब चैनल का कोई रेस्पोंस आया कि यूट्यूब की उसे यस बिल्कुल अब भी रिव्यू चल रहा है अपने कुछ भी नहीं कर सकते हैं उसके इंदर जल्दी उसका रिव्यू को और फिर अपना चैनल वापस आये तो कुछ एक पाटिकुलर टाइम नहीं बता
01:03:27किस तरीके से क्रियेट करते कस्टम हुक्स क्या होते हैं कैसे यूज आते हैं उसके पन डिसकस करेंगे नेक्स्ट क्लास के अंदर
01:03:34अच्छाउग हैं तो कर दो थी इस क्रीछा अच्छा रहना बटीशक रहें हुक्त अच्छा रेंगे लेड़ होते हैं आपको यह में हो आ आते हैं उसके अब्स में पडली हैं आपको बताल भाता रहनें आपको इसी ओना लादे पहलें आफंड नहीं कानी और यूज जिग
01:04:04अगर हम पूरूल को पी डाउट नीत आज की क्लास अपन इतनी रखते हैं तेंक फिर अपनी कलवाली क्लास के अंदर और
01:04:26ओके थैंक यूज गैस अपना द्यान रखो नप्षिंक अपने कलवाली क्लास के अंदर है भाई-बाई वरिवेर्वन
01:04:34बाइ
Be the first to comment