title: Good approach to managing nested state in React
body: <p>EDIT: I rewrote this question to clarify what I'm after - thank you to the people who have responded so far helping me hone it.</p>
  
  <p>I am trying to understand how best to manage complex, nested state in React, while also limiting the number of times <code>render()</code> is called for components whose content has not changed.</p>
  
  <p>As background:</p>
  
  <p>Suppose I have state with both "authors" and "publications" in an object like this:</p>
  
  <pre><code>{
    'authors' : {
      234 : {
        'name' : 'Alice Ames',
        'bio' : 'Alice is the author of over ...',
        'profile_pic' : 'http://....'
      },
      794 : {
        'name' : 'Bob Blake',
        'bio' : 'Hailing from parts unknown, Bob...',
        'profile_pic' : 'http://....'
      },
      ...more authors...
   },
   'publications' : {
      539 : {
        'title' : 'Short Story Vol. 2',
        'author_ids' : [ 234, 999, 220 ]
      },
      93  : {
        'title' : 'Mastering Fly Fishing',
        'author_ids' : [ 234 ]
      },
      ...more publications...
    }
  }
  </code></pre>
  
  <p>In this contrived example the state has two main areas, accessed by the <code>authors</code> and <code>publications</code> keys.</p>
  
  <p>The <code>authors</code> key leads to an object keyed on an ID of the author, which leads to an object with some author data.</p>
  
  <p>The <code>publications</code> key leads to an object keyed on the ID of the publication that has some publication data, and an array of authors.</p>
  
  <p>Suppose my state is in an <code>App</code> component with child components like the following pseudo JSX:</p>
  
  <pre><code>...
  &lt;App&gt;
    &lt;AuthorList authors={this.state.authors} /&gt;
    &lt;PublicationList authors={this.state.authors} publications={this.state.publications} /&gt;
  &lt;/App&gt;
  ...
  
  ...
  class AuthorList extends React.Component {
    render() {
      let authors = this.props.authors;
      return (
        &lt;div&gt;
          { Object.keys( authors ).map( ( author_id ) =&gt; {
            return  &lt;Author author={authors[author_id]} /&gt;;
          }
        &lt;/div&gt;
      );
    }
  }
  ...
  
  ...
  class PublicationList extends React.Component {
    render() {
      let publications = this.props.publications;
      let authors = this.props.authors;
      return (
        &lt;div&gt;
          { Object.keys( publications ).map( ( publication_id ) =&gt; {
            return  &lt;Publication publication={publications[publication_id]} authors=authors /&gt;;
          }
        &lt;/div&gt;
      );
    }
  }
  ...
  </code></pre>
  
  <p>Assume <code>AuthorList</code> has a bunch of child <code>Author</code> components, and <code>PublicationList</code> has a bunch of child <code>Publication</code> components that render the actual content of those things.</p>
  
  <p>Here is my question: Suppose I want to update the <code>bio</code> for a given author, but I don't want <code>render()</code> to be called for all the <code>Author</code> and <code>Publication</code> objects whose content have not changed.</p>
  
  <p>From this answer:</p>
  
  <p><a href="https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called">ReactJS - Does render get called any time &quot;setState&quot; is called?</a> </p>
  
  <p>A React component's <code>render()</code> function will get called any time its state, or the state of any of its parents, change - regardless of whether that state change has anything to do with the props of that component.  This behavior can be changed with shouldComponentUpdate.</p>
  
  <p>How people handle complex state like the above - it doesn't seem like calling render() on large numbers of components on every state change is a good solution (even if the resulting rendered object is the same and so no change occur to the actual DOM).</p>