title: Why does component remount every state update?
body: <p>EDIT:</p>
  <p>I made some stupid mistakes within my code prior to asking this question. I realise now that this question likely will not serve as useful to anyone as what I am saying is actually in itself misleading. Apologies and thank you to those that replied.</p>
  <hr />
  <p>I am currently learning React Native and have come across some unintuitive behaviour. As far as I am aware, the useEffect hook can be used in such a way to determine the life-cycle of a component (i.e. when it mounts and dismounts). When I update the state within a component (in this case 'ComponentX'), the entire component seems to remount. I did not think that this was the intended behaviour. If someone could tell me if it is so - or what I am doing wrong that is causing this to happen - that would be very helpful! Thanks.</p>
  <p><strong>Expected behaviour</strong>: Component does not unmount and remount.</p>
  <p><strong>Actual behaviour</strong>: Component remounts on every state change.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { Text, TouchableHighlight, View } from &quot;react-native&quot;;
  
  export default function App() {
    return (
      &lt;ComponentX /&gt;
    );
  }
  
  const ComponentX = () =&gt; {
    const [componentState, setComponentState] = useState(0);
  
    useEffect(() =&gt; {
      console.log(&quot;mounted&quot;);
      return () =&gt; console.log(&quot;unmounted&quot;);
    }, []);
  
    return (
      &lt;View style={{ flex: 1, justifyContent: &quot;center&quot; }}&gt;
        &lt;TouchableHighlight
          style={{ backgroundColor: &quot;red&quot;, padding: 20 }}
          onPress={() =&gt; {
            setComponentState(componentState + 1);
          }}
        &gt;
          &lt;Text&gt;Update State&lt;/Text&gt;
        &lt;/TouchableHighlight&gt;
        &lt;Text&gt;{componentState}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  </code></pre>