Why is the initial state getting printed along with the data?

Question

I am fetching data from a backend api.

const Home = () => {
const [posts,setPosts]=useState([]);


useEffect(()=>{
const fetchPosts= async ()=>{
  const res = await axios.get("/posts")
  setPosts(res.data);
 }

fetchPosts();
},[])

console.log(posts)

However in doing this, the initial state of posts which is [] is also getting printed.

Why is this happening and how can I avoid this and only get the data?

Answer 1

that is the reason why you see loading in real-world App because communication between server and client takes time so we show loading or show error if API gets error the same logic goes to component or element whatever your are trying to show as well

if(posts.length > 0) {
    console.log(posts)
} else {
    console.log("Loading...")
}