title: Re-render child when prop changes in App.js
body: <p>I need the header of my page to change when a certain action occurs. For this I am making changes inside App.js.</p>
  <pre><code>function App() {
  
    const [list, setList] = useState([]);
  
    function addList(id) {
      var updated = list
      updated.push(id)
      setList(updated)
    }
  
    return (
      &lt;Router&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Header list={list}&gt;&lt;/Header&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  Header.js
  const Header = ({list}) =&gt; {
  
      return (
          &lt;div&gt;
              &lt;p&gt;list&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>I need Header to be re-rendered when setList happens. And I would assume that it would since list is being passed as a prop.</p>
  <p>I have some other routes that run addList but the problem is that Header is not re-rendered. I'm sure there's a better way to go about this...</p>