React - useEffect with dependency still fires on first render

I'm having a weird issue in my component. I'm developing a blog app, and this specific component should display the selected blog post. In order to do that, on render it should fetch the data from a web database and display it. Then the component should provide a button that lets the user delete the specific post.

To achieve the above, I thought of using two useEffect hooks: the first triggers right after the mounting phase, ( empty dependencies []), the second triggers when the user clicks the button "Delete this post". The button has a onClick() event handler that switches the state variable deletePost to true; since the second useEffect hook has that state variable in its dependencies, it should trigger and send the fetch DELETE to the web db.

What happens, instead, is that the component gets mounted, the first useEffect fires but suddenly the second hook fires aswell, while blogData is set to undefined; the fetch DELETE fails and the user gets redirected to the error page.

I thought that it was a problem in the onClick event handler in the button definition, but I believe it's coded correctly.

BlogPost.jsx

import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { Footer } from "../components/Footer";
export const BlogPost = () =>
{
const [blogData, setBlogData] = useState({title : null, content : null, tags : null});  // Initialization of state, in order to display "null" until useEffect fetches the data.
const [deletePost, setDeletePost] = useState(false); // Initialization of the flag "it's time to delete the post"
const navigate = useNavigate();
const urlParams = useParams();
/* first hook fires right after mounting and it retrieves the blog post's data */
useEffect(() => {
const retrieveBlog = async () =>
{
// We need to make a query to restdb.io with the blog title to retrieve content and author.
const response = await fetch("https://reactblogapp-52d2.restdb.io/rest/excel-blog?q={\"title\":\"" + urlParams.id + "\"}",
{
"headers" : {
'Cache-Control' : "no-cache",
'x-apikey': '63d53b073bc6b255ed0c43c2',
'content-type': 'application/json'
}
}
);
if (!response.ok)
{
console.log("Database call response not ok!");
navigate("/notfound");
}
else
{
const res = await response.json();
setBlogData(res[0]);
}
}
retrieveBlog().catch((error) => (console.log("There was an error: " + error)));
}, []);
/* Second effect hook should fire when the user clicks on the delete button, it fires instead right after the first hook. */
useEffect(() => {
const str = "https://reactblogapp-52d2.restdb.io/rest/excel-blog/" + blogData._id + "\"}";
console.log(str);
console.log(blogData);
const deleteFunction = async () =>
{
const response = await fetch(str,
{
"method" : 'DELETE',
"headers" : 
{
'Cache-Control' : "no-cache",
'x-apikey': '63d53b073bc6b255ed0c43c2',
'content-type': 'application/json'
}
});
if (!response.ok)
{
console.log("Database call response not ok! Can't delete the post now.");
navigate("/notfound");  // hook fires BEFORE the user clicks on the button, blogData is set to undefined and it always redirects it to notfound, because the fetch fails.
}
else
{
const res = await response.json();
if (res["result"]  === 0)
alert("Can't delete this post now! Sorry for the inconvenient.");
}
}
deleteFunction().catch((error) => (console.log("There was an error: " + error)));
}, [deletePost]);
return(
<div>
{!!blogData.title ? <h1>{blogData.title}</h1> : null}
{!!blogData.content ? <p>{blogData.content}</p> : null}
{!!blogData.tags ? <h5>{blogData.tags}</h5> : null}
<button onClick={() => setDeletePost(true)}>Delete this post</button>
<Footer />
</div>
);
}

Why is my component not waiting for the onClick button event when firing the second Effect hook ?

> but suddenly the second hook fires aswell, while blogData is set to undefined;

You could e.g. prevent the function from being called with a simple condition inside the second useEffect, like:

if (!deletePost) return; 
or
if (!blogData) return;

but this is definitely a workaround.

> I thought that every web request / API call is considered a "side effect" in regards of the component's lifecycle, and thus it should be put in a useEffect hook

API calls should be called within useEffect hook, but only if you want to call the API in specified state (lifecycle) of the component, e.g. if you want to fetch some data on component mount, you need to place it in the useEffect. But the deletion call is not supposed to be called when the component state chages. It's supposed to be called on user-action (event), that is onClick.

Basically, just apply the deletion call to the button.

const handleDeletion = async () => {
const response = await fetch(str, ...);
};
<button onClick={handleDeletion}>Delete this post</button>