react/ state not being updated because of cleanup - reactjs

Question

I have custom hook that adds user info for posts created. And if I don't add cleanup it works as intended. I create new post, press post and it gets added to screen, but with if(mounted.current)setState() it does not update, only on refresh. What could be the problem and how could I fix it?
const AllPostsAssign = () => {
const { userPosts, allUsers } = useData();
const [posts, setPosts] = useState();
const mounted = useRef(true);
// map existing posts and add user object and post id into post object.
useEffect(() => {
const postsWithUsers = allUsers.map((y) => {
const usersAssignedToPosts = userPosts.map((x) => {
if (y.userId === x.data().userId) {
const q = Object.assign(x.data(), { id: x.id });
const z = Object.assign(q, { user: y });
return z;
}
});
return usersAssignedToPosts;
});
const noUndefined = postsWithUsers.flat().filter((post) => post);
// without mounted.current it works.
if (noUndefined && mounted.current) setPosts(noUndefined);
console.log(mounted.current);
console.log(posts);
return () => (mounted.current = false);
}, [userPosts, allUsers]);
// sort by time created and then reverse, so newest posts would be on top.
posts &&
posts.sort((a, b) => {
return a.createdAt.seconds - b.createdAt.seconds;
});
posts && posts.reverse();
return posts;
};
export default AllPostsAssign;

Answer 1

Have your mounted check declared directly inside your useEffect, as such:
useEffect(() => {
let mounted = true;
const postsWithUsers = allUsers.map((y) => {
const usersAssignedToPosts = userPosts.map((x) => {
if (y.userId === x.data().userId) {
const q = Object.assign(x.data(), { id: x.id });
const z = Object.assign(q, { user: y });
return z;
}
});
return usersAssignedToPosts;
});
const noUndefined = postsWithUsers.flat().filter((post) => post);
// without mounted.current it works.
if (noUndefined && mounted) setPosts(noUndefined);
console.log(mounted);
console.log(posts);
return () => (mounted = false);
}, [userPosts, allUsers]);