title: How do I make my post load only if it has been fetched
body: <p>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:</p>
  <pre><code>const PostPage = ({post, setPost, isLoading, setIsLoading}) =&gt; {
    const location = useLocation()
    const pathname = location.pathname.split(&quot;/&quot;)[2]
  
    useEffect(() =&gt; {
      setIsLoading(true)
      const fetchData = async () =&gt; {
        let res = await axios.get(`http://localhost:4000/posts/${pathname}`)
        const postData = res.data
        setPost(postData)
        setIsLoading(false)
      }
      fetchData()
    }, [])
  
    return (
      &lt;&gt;
        {!isLoading &amp;&amp; (
          &lt;div&gt;
            &lt;h1&gt;{post.title}&lt;/h1&gt;
            &lt;p&gt;{post.text}&lt;/p&gt;
          &lt;/div&gt;
        )}
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>These are my routes:</p>
  <pre><code>&lt;Switch&gt;
            &lt;Route path=&quot;/&quot; exact&gt;
              {isLogged &amp;&amp; (
                &lt;AddPost
                  posts={posts}
                  setPosts={setPosts}
                  postTitle={postTitle}
                  setPostTitle={setPostTitle}
                  postText={postText}
                  setPostText={setPostText}
                  setIsLoading={setIsLoading}
                /&gt;
              )}
              &lt;div className=&quot;posts-row&quot;&gt;
                {posts.slice(0).reverse().map(post =&gt; (
                  &lt;Post
                    key={post.id}
                    id={post.id}
                    postTitle={post.title}
                    postText={post.text}
                    isLogged={isLogged}
                    posts={posts}
                    setPosts={setPosts}
                    /&gt;
                ))}
              &lt;/div&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/posts/:id&quot; exact&gt;
              &lt;PostPage
                post={post}
                setPost={setPost}
                isLoading={isLoading}
                setIsLoading={setIsLoading}
              /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
  </code></pre>
  <p>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</p>
  <p>Edit:
  Post.js</p>
  <pre><code>const Post = ({postTitle, postText, isLogged, posts, setPosts, id}) =&gt; {
  
    const removePost = async (id) =&gt; {
      const postArray = posts.filter((post) =&gt; (post.id !== id))
      let res = await axios.delete(`http://localhost:4000/posts/${id}`)
      setPosts(postArray)
    }
  
    return (
      &lt;div className=&quot;post&quot;&gt;
        &lt;Link to={`/posts/${id}`}&gt;
          &lt;strong&gt;
            {postTitle}
          &lt;/strong&gt;
        &lt;/Link&gt;
        &lt;p&gt;{postText}&lt;/p&gt;
        {isLogged &amp;&amp; (
          &lt;button onClick={() =&gt; removePost(id)}&gt;
            ️
          &lt;/button&gt;
        )}
      &lt;/div&gt;
    )
  }
  </code></pre>