ReactJS set array data

Question

I want to ask: Why userPost is empty?

function Feed() {
  const [userPost, setUserPost] = useState([]);
  useEffect(() => {
    const userId = localStorage.getItem("userID");
    const getUserPost = () => {
      axios
        .get(`http://localhost:5000/api/posts/profile/${userId}`)
        .then((res) => {
          console.log(res.data.posts);
          setUserPost(res.data.posts);
          console.log(userPost);
        })
        .catch((err) => {
          console.log(err.response);
        });
    };
    getUserPost();
  }, []);

  console.log(userPost);

  return (<></>)
}

Result: console.log(res.data.posts)

(3) [{…}, {…}, {…}]
0: {_id: '6220c9c7c1750a6ec3618165', userId: {…}, …}
1: {_id: '6220d26dc1750a6ec36181a7', userId: {…}, …}
2: {_id: '6221de326c2cc78a2b758a63', userId: {…}, …}
length: 3
[[Prototype]]: Array(0)

Result: console.log(userPost)

[]
length: 0
[[Prototype]]: Array(0)

Thanks.

Answer 1

The issue is setUserPost is an asynchronous operation. Therefore you cannot expect it to log right after the setter method.

setUserPost(res.data.posts);
console.log(userPost);

If you want to see the updated userPost value add the log to the method body of the Feed component. (Because Feed gets invoked when a state of the component updates)

function Feed() {
  const [userPost, setUserPost] = useState([]);
  useEffect(() => {
    const userId = localStorage.getItem("userID");
    const getUserPost = () => {
      axios
        .get(`http://localhost:5000/api/posts/profile/${userId}`)
        .then((res) => {
          setUserPost(res.data.posts);
        })
        .catch((err) => {
          console.log(err.response);
        });
    };
    getUserPost();
  }, []);

  console.log(userPost);

  return <></>;
}

Answer 2

Actually, it's not empty! Setting state in React is not a sync function, it's async. You're logging the state before it is changed. If you log the userPost in the body of your component function, you will see the items are there.

function Feed() {
  const [userPost, setUserPost] = useState([]);

  useEffect(() => {
    const userId = localStorage.getItem("userID");
    const getUserPost = () => {
      axios
        .get(`http://localhost:5000/api/posts/profile/${userId}`)
        .then((res) => {
          setUserPost(res.data.posts);
        })
        .catch((err) => {
          console.log(err.response);
        });
    };
    getUserPost();
  }, []);

  // LOG HERE
  console.log(userPost);
}

Answer 3

useState is asynchronous, so that's why when you try to call console.log(userPost); instantly after setUserPost(res.data.posts);, userPost has not been updated yet.

If you want to understand more, you can read this article

https://dev.to/shareef/react-usestate-hook-is-asynchronous-1hia