title: When to use functional setState
body: <p>I have been learning React over the past few days, looking at a few tutorials and explanations regarding the different ways in which you can write different elements. However there is one I have been most curious about - the <code>setState</code> function to update/override the <code>state</code> properties of a component.</p>
  
  <p>For example, imagine I have a class with the following:</p>
  
  <pre><code>class Photos extends React.Component {
      constructor() {
          super()
          state = {
              pictures: []
          }
      }
  
     componentDidMount() {
        // This is where the fetch and setState will occur (see below)
     }
  
      render() {
         return {
            &lt;div className="container"&gt;
               {this.state.pictures}
            &lt;/div&gt;
         }
      }
  }
  </code></pre>
  
  <p>This example sees me fetch images from an API.</p>
  
  <p>Given that I have performed my fetch, map and return for this function - I will then update the <code>pictures: []</code> state array with the results gained in the API call.</p>
  
  <p>My question stems from the differing methods I have seen regarding how to update/override the pictures state property.</p>
  
  <p>I have seen it written in 2 varying ways:</p>
  
  <p><strong>1)</strong> <em>This seems to be a very simple and easy to read method</em></p>
  
  <p><code>this.setState({pictures: pics})</code></p>
  
  <p><strong>2)</strong> <em>This is more complex but I have see it described as a more safe method</em></p>
  
  <pre><code>this.setState(prevState =&gt; ({
     pictures: prevState.pictures.concat(pics)
  }))
  </code></pre>
  
  <p>Could somebody please explain the merits of using either? I want to be consistent with code in the future, dealing with props and states etc, so the most versatile method would of course be preferred.</p>