title: Why are all my component rerendering when I change an unrelated state?
body: <p>I'm trying to change a state without having the entire app reload. For some reason that's not happening, and when I set the state of an object that isn't even passed down to a specific component, then that component updates for no reason.</p>
  
  <p>So in the code below, I'm when I set the message, <code>MainContent</code> should not reload.</p>
  
  <pre><code>const [message, setMessage] = useState({});
  setMessage('my message'); // This causes the entire app, including 'MyComponent' to reload
  
  return (
      &lt;div className='App'&gt;
          &lt;Header user={user} message={message} setMessage={setMessage} /&gt;
  
          &lt;div id='main-site'&gt;
              &lt;Switch&gt;
                  // SHOULD NOT RELOAD UNLESS PASSED IN PROP CHANGED
                  &lt;Route path='/main' component={MainContent} /&gt;
  
              &lt;/Switch&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  );
  </code></pre>
  
  <p><strong>Header.jsx</strong></p>
  
  <pre><code>return (
      {message &amp;&amp; (
          &lt;div&gt;
              &lt;span&gt;{message.text}&lt;/span&gt;
              // This on click makes the entire app reload
              &lt;button className='close' onClick={() =&gt; setMessage({})}&gt;
                  X
              &lt;/button&gt;
          &lt;/div&gt;
      )}
  );
  </code></pre>
  
  <p>How can I make sure the only components that have the <code>message</code> prop get updated, and no other components rerender?</p>