Feed.js

import React, { useState, useEffect } from "react"
import FeedPost from "app/FeedPost"
import {
  loadFeedPosts,
  subscribeToNewFeedPosts
} from "app/utils"
// import FeedFinal from './Feed.final'
// export default FeedFinal
export default Feed

function Feed() {
  const [newPosts, setNewPosts] = useState([])
  const [posts, setPosts] = useState(null)
  const [time, setTime] = useState(Date.now())
  const [limit, setLimit] = useState(3)

  useEffect(() => {
    return subscribeToNewFeedPosts(time, newPosts => {
      setNewPosts(newPosts)
    })
  }, [time])

  useEffect(() => {
    let isCurrent = true
    loadFeedPosts(time, limit).then(posts => {
      if (isCurrent) {
        setPosts(posts)
      }
    })
    return () => {
      isCurrent = false
    }
  }, [time, limit])

  const handleViewMore = () => {
    setLimit(limit + 3)
  }

  const handleViewNewPosts = () => {
    // setPosts([...newPosts, ...posts])
    // setNewPosts([])
    setLimit(limit + newPosts.length)
    setTime(Date.now())
  }

  return (
    <div className="Feed">
      {newPosts.length > 0 && (
        <div className="Feed_button_wrapper">
          <button
            onClick={handleViewNewPosts}
            className="Feed_new_posts_button icon_button"
          >
            View {newPosts.length} New Post(s)
          </button>
        </div>
      )}

      {posts ? (
        posts.map(post => (
          <FeedPost key={post.id} post={post} />
        ))
      ) : (
        <div>Loading Posts...</div>
      )}

      <div className="Feed_button_wrapper">
        <button
          onClick={handleViewMore}
          className="Feed_new_posts_button icon_button"
        >
          View More
        </button>
      </div>
    </div>
  )
}

// you can delete this
const fakePost = {
  createdAt: Date.now() - 10000,
  date: "2019-03-30",
  message: "Went for a run",
  minutes: 45,
  uid: "0BrC0fB6r2Rb5MNxyQxu5EnYacf2"
}