reactjs - How do I make my post load only if it has been fetched

Question

Each time I open a new post page, the data from the last post shows on the screen for a couple of miliseconds and then the new data is shown. I have tried to check if the post is loading and set it in the state with the setIsLoading function, but it does not work. See the code below:

const PostPage = ({post, setPost, isLoading, setIsLoading}) => {
  const location = useLocation()
  const pathname = location.pathname.split("/")[2]

  useEffect(() => {
    setIsLoading(true)
    const fetchData = async () => {
      let res = await axios.get(`http://localhost:4000/posts/${pathname}`)
      const postData = res.data
      setPost(postData)
      setIsLoading(false)
    }
    fetchData()
  }, [])

  return (
    <>
      {!isLoading && (
        <div>
          <h1>{post.title}</h1>
          <p>{post.text}</p>
        </div>
      )}
    </>
  )
}

These are my routes:

<Switch>
          <Route path="/" exact>
            {isLogged && (
              <AddPost
                posts={posts}
                setPosts={setPosts}
                postTitle={postTitle}
                setPostTitle={setPostTitle}
                postText={postText}
                setPostText={setPostText}
                setIsLoading={setIsLoading}
              />
            )}
            <div className="posts-row">
              {posts.slice(0).reverse().map(post => (
                <Post
                  key={post.id}
                  id={post.id}
                  postTitle={post.title}
                  postText={post.text}
                  isLogged={isLogged}
                  posts={posts}
                  setPosts={setPosts}
                  />
              ))}
            </div>
          </Route>
          <Route path="/posts/:id" exact>
            <PostPage
              post={post}
              setPost={setPost}
              isLoading={isLoading}
              setIsLoading={setIsLoading}
            />
          </Route>
        </Switch>

In App.js I have isLoading set to true, but it works only for the first post. For the sake of React please don't report my question :D

Edit: Post.js

const Post = ({postTitle, postText, isLogged, posts, setPosts, id}) => {

  const removePost = async (id) => {
    const postArray = posts.filter((post) => (post.id !== id))
    let res = await axios.delete(`http://localhost:4000/posts/${id}`)
    setPosts(postArray)
  }

  return (
    <div className="post">
      <Link to={`/posts/${id}`}>
        <strong>
          {postTitle}
        </strong>
      </Link>
      <p>{postText}</p>
      {isLogged && (
        <button onClick={() => removePost(id)}>
          ???
        </button>
      )}
    </div>
  )
}

Answer 1

Your effect hook only runs when the component is mounted for the first time. If you want to run it every time pathname changes, add it to its dependency array:

useEffect(() => {
  setIsLoading(true)
  const fetchData = async () => {
    let res = await axios.get(`http://localhost:4000/posts/${pathname}`)
    const postData = res.data
    setPost(postData)
    setIsLoading(false)
  }
  fetchData()
}, [pathname])