title: Why is state shared between two components of the same type?
body: <p>I have simple React app, where I conditionally render two instances of the same component based on the value of a boolean variable:</p>
  <pre><code>export default function App() {
    const [showFirst, setShowFirst] = useState(true);
    return (
      &lt;div&gt;
        &lt;button type=&quot;button&quot; onClick={() =&gt; setShowFirst(show =&gt; !show)}&gt;
          Switch between components
        &lt;/button&gt;
        {showFirst ? (
          &lt;SomeComponent text=&quot;I am the first&quot; /&gt;
        ) : (
          &lt;SomeComponent text=&quot;I am the second&quot; /&gt;
        )}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>This component has internal state: I increase a counter on a mouse click inside this component:</p>
  <pre><code>class SomeComponent extends React.Component {
    state = {
      count: 0
    };
    componentDidMount() {
      console.log(&quot;mounted&quot;);
    }
  
    componentWillUnmount() {
      console.log(&quot;unmounting&quot;);
    }
  
    render() {
      return (
        &lt;div
          style={{
            display: &quot;flex&quot;,
            flexDirection: &quot;column&quot;,
            border: &quot;2px solid green&quot;,
            padding: 8
          }}
        &gt;
          {this.props.text}
          &lt;button
            onClick={() =&gt;
              this.setState(({ count }) =&gt; ({
                count: count + 1
              }))
            }
          &gt;
            increase counter
          &lt;/button&gt;
          {this.state.count}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>I expected the 'count' state variable inside SomeComponent to have two different values inside the two components, but they share state. Why is that?</p>
  <p>Here is a <a href="https://stackblitz.com/edit/react-mdqbz5?file=src/App.js" rel="nofollow noreferrer">live demo to illustrate my point</a>.</p>