React Hook's state not getting updated

Question

I've built a React Hook as follows:

const Index = (props) => {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const getPosts = async () => {
      const posts = await getPostFromWebService()
      for (let i of posts) {
        setPosts([ ...posts, i ])
      }
    }

    getPosts()
  }, [])

  // ... remaining code
}

But even if the web service returns 5 posts, only the last posts is getting updated in the posts state. Hence it only receives one post in it, instead of 5.

What am I doing wrong here?

Answer 1

It sounds like you want something like this. Here we would have the useEffect listen for any changes in postCount so that we can trigger your logic to fetch more posts.

const Index = (props) => {
  const [posts, setPosts] = useState([])
  const [postCount, setPostCount] = useState(0)

  useEffect(() => {
    const getPosts = async () => {
      const newPosts= await getPostFromWebService()

      setPosts([...posts, newPosts])
    }
  }, [postCount])

  return(
    <div>
       <button onClick={() => setPostCount(postCount + 5)}>Get more posts</button>
    </div>
  )
}