title: How to stop root component re-rendering
body: <p>I have a root component that does:</p>
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { mydata: {} }
    }
  
    getData = () {
      // do API GET
    }
  
    putData = (data) {
      // do API PUT, then:
      this.setState({mydata: data});
  
    componentDidMount = () {
      getData();
    }
  
    render() {
      var { mydata } = this.state;
      return (
        &lt;App&gt;
          &lt;MyComponent mydata={mydata} putData={putData} /&gt;
          &lt;AnotherComponent /&gt;
        &lt;/App&gt;
      )
    }
  
  }
  </code></pre>
  <p>The trouble I'm having, is that whenever I call 'putData' from 'MyComponent', the whole of 'App' re-renders.</p>
  <p>I've looked into:</p>
  <ol>
  <li><p>memoizing (which I dont really understand)</p>
  </li>
  <li><p>using Hooks (useEffect) to move the update and state into MyComponent. But then I enter problems with accessing the data from elsewhere without getting into context (which I can't fathom, and is probably overkill anyway?).</p>
  </li>
  </ol>
  <p>What should I do?</p>