title: React usEffect firing when it shouldn't be
body: <p>I have a react component with a prop that is passed by a redux connect method. There is a useEffect linked specifically to that prop that is supposed to perform an async call when it changes. The problem is the useEffect fires any time I change the redux state anywhere else in that app, despite the prop I have the useEffect attached to not changing.</p>
  
  <p>The useEffect method looks like this</p>
  
  <pre><code>  useEffect(() =&gt; {
      if (userPhoneNumber) {
        myAsyncFunction()
          .then(() =&gt; {
            showData()
          })
      }
    }, [userPhoneNumber])
  </code></pre>
  
  <p>And the userPhoneNumber prop is passed via the react-redux <code>connect</code> method like so:</p>
  
  <pre><code>const mapStateToProps = state =&gt; {
    return {
      userPhoneNumber: state.appState.userPhoneNumber
    }
  }
  
  export default connect(mapStateToProps)(MyComponent)
  </code></pre>
  
  <p>From what I understand this could be breaking in two potential places. for one, useEffect should not be firing if the <code>userPhoneNumber</code> prop doesn't change. Also, the mapStateToProps method is not returning a new value so it should not be triggering any sort of a rerender.</p>
  
  <p>The redux state changes that are leading to the unexpected useEffect call are coming from sibling components that have a similar react-redux connect setup to this component, with different state to prop mappings.</p>