Angular Academy · पाठ

इफ़ेक्ट और साइड इफ़ेक्ट

इफ़ेक्ट से सिग्नल परिवर्तनों पर प्रतिक्रिया दें।

पाठ 2, कुल 4 में से13 चरण

इफ़ेक्ट और साइड इफ़ेक्ट, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इफ़ेक्ट क्या है

effect() ऐसा फ़ंक्शन चलाता है जब भी उसके द्वारा पढ़ा गया कोई सिग्नल बदलता है। कम्प्यूटेड के विपरीत, इफ़ेक्ट साइड इफ़ेक्ट के लिए होते हैं: लॉगिंग, localStorage के साथ समन्वय, एपीआई कॉल करना और DOM में बदलाव करना।

इफ़ेक्ट कोई मान नहीं लौटाते।

इफ़ेक्ट बनाना

इफ़ेक्ट तुरंत एक बार चलता है, फिर हर बार ट्रैक किए गए सिग्नल के बदलने पर दोबारा चलता है।

import { signal, effect } from '@angular/core';

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

इफ़ेक्ट को इंजेक्शन संदर्भ की आवश्यकता होती है

डिफ़ॉल्ट रूप से effect() को इंजेक्शन संदर्भ में बनाया जाना चाहिए — आम तौर पर किसी कंपोनेंट, डायरेक्टिव या सेवा के कंस्ट्रक्टर या फ़ील्ड इनिशियलाइज़र में।

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

स्वचालित निर्भरता ट्रैकिंग

कम्प्यूटेड की तरह, इफ़ेक्ट रनटाइम पर ठीक उन्हीं सिग्नल को ट्रैक करते हैं जिन्हें वे पढ़ते हैं। शर्त के आधार पर पढ़े गए सिग्नल केवल तभी ट्रैक होते हैं, जब उन तक पहुँचा जाए।

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

सिग्नल को localStorage के साथ समन्वयित करना

इफ़ेक्ट का एक सामान्य उपयोग: स्थिति में बदलाव होने पर उसे सुरक्षित रखना।

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

इफ़ेक्ट मान नहीं लौटाते

यदि आपको कोई व्युत्पन्न मान चाहिए, तो computed() का उपयोग करें। इफ़ेक्ट बिना रिटर्न वाली कार्रवाइयों के लिए होते हैं; उनका परिणाम स्वयं साइड इफ़ेक्ट होता है।

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

इफ़ेक्ट के अंदर सिग्नल सेट करना

लूप से बचने के लिए Angular डिफ़ॉल्ट रूप से इफ़ेक्ट के अंदर सिग्नल में लिखने की अनुमति नहीं देता। यदि आपको वास्तव में ऐसा करना हो, तो { allowSignalWrites: true } पास करें — लेकिन व्युत्पत्ति के लिए computed को प्राथमिकता दें।

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

EffectRef से मैन्युअल सफ़ाई

effect() एक EffectRef लौटाता है। स्वामी के नष्ट होने से पहले इफ़ेक्ट को मैन्युअल रूप से रोकने के लिए .destroy() कॉल करें।

import { effect, EffectRef } from '@angular/core';

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

इफ़ेक्ट अपने-आप साफ़ हो जाते हैं

जब किसी कंपोनेंट में इफ़ेक्ट बनाया जाता है, तो कंपोनेंट नष्ट होने पर इफ़ेक्ट भी अपने-आप नष्ट हो जाता है। आपको आम तौर पर स्वयं .destroy() कॉल करने की आवश्यकता नहीं होती।

इफ़ेक्ट रेंडर के बाद चलते हैं

इफ़ेक्ट निर्धारित होकर बदलाव-पहचान के बाद चलते हैं और प्रत्येक माइक्रोटास्क में एक साथ संसाधित होते हैं। एकाधिक समकालिक सिग्नल बदलाव इफ़ेक्ट को केवल एक बार चलाते हैं।

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

effect बनाम computed का उपयोग कब करें

computed: सिग्नल से कोई मान प्राप्त करें (शुद्ध)।
effect: कोई बाहरी काम करके सिग्नल पर प्रतिक्रिया दें (अशुद्ध)।

यदि आप इफ़ेक्ट से कोई मान लौटाते हुए पाएँ, तो संभवतः आपको computed का उपयोग करना चाहिए।

त्वरित जाँच

इफ़ेक्ट की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: इफ़ेक्ट

effect() अपने ट्रैक किए गए सिग्नल के बदलने पर एक फ़ंक्शन चलाता है, और वह भी केवल साइड इफ़ेक्ट के लिए।

तुरंत एक बार चलता है, फिर हर निर्भरता बदलाव पर चलता है।
इसे इंजेक्शन संदर्भ की आवश्यकता होती है।
यह अपने स्वामी के साथ अपने-आप नष्ट हो जाता है; मैन्युअल नियंत्रण के लिए EffectRef लौटाता है।
व्युत्पत्तियों के लिए computed और कार्रवाइयों के लिए effect का उपयोग करें।

अगला विषय: इफ़ेक्ट के अंदर संसाधनों की सफ़ाई।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “इफ़ेक्ट और साइड इफ़ेक्ट” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “इफ़ेक्ट और साइड इफ़ेक्ट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“इफ़ेक्ट और साइड इफ़ेक्ट” में मैं क्या सीखूँगा?

इफ़ेक्ट से सिग्नल परिवर्तनों पर प्रतिक्रिया दें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“इफ़ेक्ट और साइड इफ़ेक्ट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ