React Follow Function activates on page load - reactjs

Question

I am trying to implement a follow/unfollow function in a react rails-api web application. Currently the follow and unfollow post/delete just fine when I click the follow/unfollow button.
However, whenever a user visits another users page it will follow/unfollow when the page loads without clicking the follow/unfollow button. I do not understand why this is happening since I have, for my post/delete, the useEffect second param set to go off when the state for my follow/unfollow changes.
Please help me figure out why this is happening and how to prevent this. Let me know if more information is needed.
import React, {useState, useEffect} from 'react'
import {Link, useParams} from 'react-router-dom'
import decode from 'jwt-decode'
function NotUserPage() {
const {id} = useParams()
const [user, setUser] = useState({})
const loggedUser = decode(localStorage.getItem("token"))
const username = loggedUser.username
const userId = loggedUser.user_id
const [followUnFollow, setFollowUnFollow] = useState("true")
const toggleFollowUnFollow = () => {
setFollowUnFollow(!followUnFollow)
}
const fetchUserData = () => {
fetch(`http://localhost:3000/users/${id}`)
.then(res => res.json())
.then(data => setUser(data))
}
useEffect(() => {
fetchUserData()
}, [])
const unFollow = () => {
fetch(`http://localhost:3000/users/${id}/unfollow`, {
method: "POST",
body: JSON.stringify({
follower_id: userId,
followee_id: id
}),
headers: {
"Content-type": "application/json",
"Authorization": `bearer ${localStorage.getItem("token")}`,
},
})
.then(res => res.json())
.then(data => console.log(data))
}
useEffect(() => {
unFollow()
}, [followUnFollow])
const handleFollow = () => {
fetch(`http://localhost:3000/users/${id}/follow`, {
method: "POST",
body: JSON.stringify({
follower_id: userId,
followee_id: id
}),
headers: {
"Content-type": "application/json",
"Authorization": `bearer ${localStorage.getItem("token")}`,
},
})
.then(res => res.json())
.then(data => console.log(data))
}
useEffect(() => {
handleFollow()
}, [followUnFollow])
const fButton = () => {
toggleFollowUnFollow() ? handleFollow() : unFollow()
}
return (
<div>
{user.username}
<button onClick={fButton}>follow</button>
</div>
)
}
export default NotUserPage

Answer 1

import React, {useState, useEffect} from 'react'
import {Link, useParams} from 'react-router-dom'
import decode from 'jwt-decode'
function NotUserPage() {
const {id} = useParams()
const [user, setUser] = useState({})
const loggedUser = decode(localStorage.getItem("token"))
const username = loggedUser.username
const userId = loggedUser.user_id
const [following, setFollowing] = useState(false)
const fetchUserData = () => {
fetch(`http://localhost:3000/users/${id}`)
.then(res => res.json())
.then(data => setUser(data))
}
useEffect(() => {
fetchUserData()
}, [])
const unFollow = () => {
fetch(`http://localhost:3000/users/${id}/unfollow`, {
method: "POST",
body: JSON.stringify({
follower_id: userId,
followee_id: id
}),
headers: {
"Content-type": "application/json",
"Authorization": `bearer ${localStorage.getItem("token")}`,
},
})
.then(res => res.json())
.then(data => console.log(data))
.then(() => setFollowing(false))
}
const handleFollow = () => {
fetch(`http://localhost:3000/users/${id}/follow`, {
method: "POST",
body: JSON.stringify({
follower_id: userId,
followee_id: id
}),
headers: {
"Content-type": "application/json",
"Authorization": `bearer ${localStorage.getItem("token")}`,
},
})
.then(res => res.json())
.then(data => console.log(data))
.then(() => setFollowing(true))
}
const fButton = () => following ? unFollow() : handleFollow();
return (
<div>
{user.username}
<button onClick={fButton}>follow</button>
</div>
)
}
export default NotUserPage