I am using react v18.1.0
I am trying to load users data from Json Placeholder API. After loading the data, I am setting it in a state called 'users'. After console.log(users), it show an Array of 10 objects. That's fine.
But after 3/4 milliseconds it show [object object], [object object], [object object].
why it Happens? Can anyone describe it, please.
Here is the screenshot
import React, { useEffect, useState } from 'react';
const Users = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(data => setUsers(data))
}, [])
console.log(users);
return (
<div>
<h1>{users.length}</h1>
</div>
);
};
export default Users;
That is happening because console.log(users) is getting executed every time the component getting re-rendered.
You have to wrap it inside useEffect hook
useEffect(() => {
console.log(users)
},[users]);
this will cause the console log to execute everytime the users state changes.