title: React hooks - useState() is not re-rendering the UI with the new state updates
body: <p>I am trying out the new React Hooks, and I am a little stuck as the UI is not updating when the local state is updated. Here is my code,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import Post from './Post'
  import PostForm from './PostForm';
  import axios from 'axios';
  
  function PostsList() {
    const [posts, setPosts] = useState([]);
    
    // setting up the local state using useEffect as an alternative to CDM
    useEffect(() =&gt; {
      axios.get('...')
        .then(res =&gt; {
          // the resposne is an array of objects
          setPosts(res.data)
        })
    })
    
    const handleSubmit = (data) =&gt; {
      // the data I am getting here is an object with an identical format to the objects in the posts array
      axios.post('...', data)
        .then(res =&gt; {
          // logging the data to validate its format. works fine so far..
          console.log(res.data);
          // the issue is down here
          setPosts([
            ...posts,
            res.data
          ])
        })
        .catch(err =&gt; console.log(err))
    }
    
    return (
      &lt;div&gt;
        &lt;PostForm handleSubmit={handleSubmit}  /&gt;
        &lt;h3&gt;current posts&lt;/h3&gt;
        
        { posts.map(post =&gt; (
          &lt;Post key={post.id} post={post} /&gt;
        )) }
      &lt;/div&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>when I submit the form, the UI flickers for a split second and then renders the current state without the new update, it seems that something is preventing it from re-rendering the new state.
  If more code/clarification is needed please leave a comment below. 
  thanks in advance.</p>