Post Count not updating in firebase react

So I have this react and firebase blog app. I want to show the count of the post of every user on the account page, which should look like this:

My code looks like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'
import { useAuthState } from 'react-firebase-hooks/auth'
import { faGoogle } from '@fortawesome/free-brands-svg-icons'
import { useState, useEffect } from 'react'
import { collection, getDocs, query, where } from 'firebase/firestore'
import { db } from '../firebase'
const style = {
button: `font-bold text-3xl text-white bg-slate-500 p-4 rounded`,
info: `font-bold`
}
const Account = ({ auth, handleSignIn, handleSignOut }) => {
const [user, loading] = useAuthState(auth);
const [posts, setPosts] = useState([])
const postRef = collection(db, "posts")
useEffect(() => {
if(user){
const userName = user.email
const getPost = async () => {
const q = query(postRef, where("author_email", "==", userName));
const data = await getDocs(q)
setPosts(data.docs.map((doc) => ({
...doc.data(),
id: doc.id
})));
};
getPost();
}}, []);
return (
<div className='text-center p-4'>
{loading ? 
<div>
<p className='italic'>Fetching user data ...</p>
</div>
: user ?
<div>
<div className='m-4'>
<p>Your Name: <span className={style.info}>{user.displayName}</span></p>
<p>Your Email: <span className={style.info}>{user.email}</span></p>
<p>Your Posts: <span className={style.info}>{posts.length}</span></p>
</div>
<button onClick={handleSignOut} className={style.button}>Sign Out</button>
</div>
:
<div>
<button onClick={handleSignIn} className={style.button}>Sign in with <FontAwesomeIcon icon={faGoogle} /></button>
</div>
}
</div>
)
}
export default Account

I am currently having an issue that it updates if I change the code, but not if I refresh the page.

The counter should be update realtime and always if I refresh

We don't see in your code where you set a counter (maybe in the setPosts() function?) but it seems that you query all the posts of the user to get this count value. As a matter of fact you do const q = query(postRef, where("author_email", "==", userName)); but nowhere in the corresponding app page we see the list of all the user's posts, therefore I make the assumption that you use the length of the array you path to the setPosts() function.

If you just want to display the number of user's posts you should use a count() aggregation query which will be much cheaper than querying all the posts documents and faster as well.

You have to display the size of post array in the tag where you have Your Post text.

Here is the sample:

use {posts.length} in the tag to show the count of posts he/she has.

But first you have to set the posts state by finding the posts of the logged in user.

As we know that useState is async in nature so, you also have to use some kind of loader/spinner.

It was actually a little thing: at the end of the useEffect() I had to pass in user into the square brackets