title: How can I prevent re-render after state changed in React Hooks?
body: <p>I am trying to build an app but the problem is when I change a state, all the components re-render.</p>
  <pre><code>const App=()=&gt;{
     const [showMenu,setshowMenu]=useState(false)
     
  
   return(
       &lt;&gt;
  
       &lt;Header showMenu={showMenu} setShowMenu={setShowMenu}/&gt;
  
       &lt;MainArea/&gt;
  
       {showMenu ? &lt;Menu/&gt; : null}
  
       &lt;Footer/&gt;
  
      &lt;/&gt;
   )
  
  }
  </code></pre>
  <p>When I set showMenu to true by button, a menu appears but the problem is all my components (Header,MainArea,Footer) do re-render. I don't want that. How can I solve this problem?</p>