title: Instances of React Component
body: <p>I have this app component:</p>
  <pre><code>function App() {
    const [ active, setActive ] = useState('student')
    const [ row, setRow ] = useState(true)
    const [ currentComponent, setCurrentComponent ] = useState(&lt;Table setRow={setRow} represent=&quot;students&quot; /&gt;)
    const [ contextData, setContextData ] = useState({});
  
    useEffect(() =&gt; {
      switch (active) {
        case 'student':
          setCurrentComponent(&lt;Table setRow={setRow} represent=&quot;students&quot; /&gt;)
          return
        case 'employee':
          setCurrentComponent(&lt;Table setRow={setRow} represent=&quot;employees&quot; /&gt;)
          return
        case 'class':
          setCurrentComponent(&lt;div&gt;class&lt;/div&gt;)
          return
      }
    }, [ active ])
  
    return (
      &lt;appContext.Provider value={{ contextData, setContextData }} &gt;
          &lt;div className=&quot;App&quot;&gt;
            { row ? &lt;TabRow setActive={setActive} active={active} /&gt; : &quot;&quot; }
            { currentComponent }
          &lt;/div&gt;
      &lt;/appContext.Provider&gt;
    );
  }
  </code></pre>
  <p>I just realized that the Table component does not mount and unmount between 'student' as active and 'employee' as active. Does this mean that the component only re renders since props change?</p>