title: React Memory Leakage with typescript using google firestore and react router
body: <p>I am currently using firestore but I am currently getting problems with memory leakage as I delete transactionally delete my component just before I leave the screen what is the best way I to avoid this leakage When I click on the link component I want to remove the notification from the database it seems to work and take me to the new page the only problem is that I get a memory leak how should I avoid this.</p>
  <pre><code>const loadAlerts = useCallback(() =&gt; {
          const alertNotifcationsObserver = onSnapshot(notifications, (querySnapshot) =&gt; {
              const alertData: any[] = []
              querySnapshot.forEach((doc) =&gt; {
                  console.log(doc.data())
                  alertData.push({
                      ...doc.data(),
                      doc
  
                  })
              });
              setAlertNotifcations(alertData)
          });
          return alertNotifcationsObserver
      }, [notifications])
  
  
      useEffect(() =&gt; {
          loadAlerts();
          console.log(alertNotifications)
      }, []);
   
  
  </code></pre>
  <pre><code>  &lt;IonItem onClick={async (e) =&gt; {
                                              console.log(i.Reference)
                                            await  notificationsController(i.Reference)
                                          }} key={i.Reference} lines='full'&gt;
                                                  &lt;Link
                                                      to={{
                                                          pathname: i.Link,
                                                          state: { documentReferencePath: i.Reference }
                                                      }}
                                                  &gt;
                                                      {i.Type}
                                                  &lt;/Link&gt;
                                          &lt;/IonItem&gt;
   
  </code></pre>
  <pre><code>const notificationsController = async(documentReferencePath:string)=&gt;{
  
   
      try {
          await runTransaction(db, async (transaction) =&gt; {
            const documentReference =  doc(db,documentReferencePath)
            const notificationDoc = await transaction.get(documentReference);
            if (!notificationDoc.exists()) {
              throw &quot;Document does not exist!&quot;;
            }
            transaction.delete(documentReference)
          });
          console.log(&quot;Notification removed successfully committed!&quot;);
        } catch (e) {
          console.log(&quot;Transaction failed: &quot;, e);
        }
  </code></pre>
  <pre><code>index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
  </code></pre>
  <p>How do I get rid of this error  also I tried to add unsubscribe for loadAlerts but type script gives me a error too.</p>
  <pre><code>Argument of type '() =&gt; () =&gt; Unsubscribe' is not assignable to parameter of type 'EffectCallback'.
  </code></pre>