title: Why Does React Component Unmount and remount on state change?
body: <p>Why does my HomeTypes component unmount and remount every time I use setDrawerOpen?
  Does a state change inside a component always cause that component to unmount and then re-mount?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect, useState } from 'react';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import Drawer from '../../components/DrawerComponent/Drawer';
  
  function HomeTypes() {
      const [drawerOpen, setDrawerOpen] = useState(null);
  
      useEffect(() =&gt; {
          console.log('Home Types Mounted');
          return () =&gt; {
              console.log('Home Types Unmounted');
          };
      });
  
      return (
          &lt;div className={`dashboard-page`}&gt;
              &lt;h1 className="dashboard-page-title"&gt;
                  Home Types
                  &lt;button
                      className={`btn bright primary`}
                      onClick={() =&gt; {
                          setDrawerOpen(true);
                      }}&gt;
                      &lt;FontAwesomeIcon icon={['fas', 'plus']} /&gt;
                      &lt;span&gt;add home type&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/h1&gt;
              &lt;Drawer
                  drawerOpen={drawerOpen}
                  closeDrawer={() =&gt; {
                      setDrawerOpen(false);
                  }}
                  title="Add Home Type"
                  drawerContent="Hello World"
              /&gt;
          &lt;/div&gt;
      );
  }
  
  export default HomeTypes;</code></pre>
  </div>
  </div>
  </p>