title: React setState() not setting state on certain items
body: <p>I'm new to React and have some pretty simple code that is acting strange (I think).</p>
  
  <p>The main app fetches a list of blog posts from a server, then passes them through props to a child component which spits the list out. By default, I'm trying to make the posts only show a preview like a title, and each post will have a state attached to it so I can keep track of which ones are fully shown or previewed.</p>
  
  <p>I have the states set up like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const [posts, setPosts] = useState([])
  const [postFullView, setPostFullView] = useState([])
  </code></pre>
  
  <p>The list initially is rendered as an empty list so nothing gets returned. When the data fetch finishes, it re-renders with all the posts.</p>
  
  <p>I use useEffect for this in the child component:</p>
  
  <pre class="lang-js prettyprint-override"><code>    useEffect(() =&gt; {
          console.log('render')         //Just to verify this got called
          setPosts(props.posts)         //Logs empty array 3 lines down,
          //setPosts([4,5,6])           //Works fine, gets logged as [4,5,6]
          console.log(props.posts)      //Logs an array of 32 objects - so props is clearly not empty
          console.log(posts)            //Logs empty array as if setPosts did nothing, but logs [4,5,6] if I comment out setPosts(props.post) and use setPosts([4,5,6])
  
          setPostFullView(posts.map(post =&gt; {return {id: post.id, view: false}}))
          console.log(postFullView)     //Will be empty since posts is empty
      }, [props])
  </code></pre>
  
  <p>Hopefully, I explained clearly what I'm confused about - I can setState using a hard-coded array, but passing in props.posts does not do anything, even though it has content.</p>