title: React native deep linking unwanted component renders even with cleanup function
body: <p>I'm facing a problem with my deep linking handle URL, which is my component renders many times after URL come to my app. in other words suppose browser opens up for a purchase action after client choose the desired session time (which handle by a state) and after client decide to do the purchase or cancel it, application opens up for showing the result but it does it multiple times.</p>
  <p>here's part of the component :</p>
  <pre><code>const bookingHandler = () =&gt; {
      if(selected == null) {
        Alert.alert('Invalid Selection', 'Please select one of the sessions!')
        return;
      }
      Linking.openURL('http://www.medicalbookingapp.cloudsite.ir/sendPay.php');
    }
  
    selectedTimeIndex = therapists.meetingPlans[selectedPlanIndex].times.findIndex((el) =&gt; el.time == selected.title);
   
    useEffect(() =&gt; {
  
      Linking.addEventListener('url', (e) =&gt; handleOpenUrl(e.url))
  
      return () =&gt; {
        Linking.removeEventListener('url', (e) =&gt; handleOpenUrl(e.url));
        console.log('event removed')
      } 
      
    });
  
    const handleOpenUrl = (url) =&gt; { 
      const route = url.replace(/.*?:\/\/\w*:\w*\/\W/g, '') // exp://myapplication.... --&gt; ''
      const id = route.split('=')[1]
      
      if(id == 1) {
        dispatch(
          BookingActions.addBooking(
            therapistId,
            therapistFirstName,
            therapistLastName,
            selected.title,
            moment(selectedDate).format(&quot;YYYY-MMM-DD&quot;),
            selected.slots,
          )
        );
        
  
        dispatch(
          doctorActions.updateTherapists(therapistId, selected.slots, selectedDate, selected.title, selectedPlanIndex, selectedTimeIndex)
        );
        setBookingConfirm(true)
        toggleModal();
  
      } else if(id == 0) {
        console.log('purchase failed...');
        toggleModal();
      }
    }
  </code></pre>
  <p>I handle my listener inside the <code>useEffect</code> hook and also it has cleanup function. but in console I get this error:</p>
  <pre><code>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 %s.%s, a useEffect cleanup function.
  </code></pre>
  <p>also I noticed something else, for sake of grasping the problem you can see component screen, and the session select part is handled with <code>state</code>. the number of rendering <code>useEffect</code> hook is somehow related to the number of change on the select session state. (I mean if I bounce around the select session, it will render more )</p>
  <p><a href="https://i.stack.imgur.com/BvYF3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BvYF3.png" alt="enter image description here" /></a></p>
  <p>if you need more information just let me know in comments.
  any help would be appreciated.</p>