State Not Updating Immediately with useState After Asynchronous Call

[bcreativex]

Body

I’m trying to update the state in my React component after an API call. However, even though the API response seems correct, the UI is not updating as expected. Here’s the code I’m using:

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      console.log('Fetched Users:', data); // Debugging shows correct data here
      setUsers(data); // State not updating immediately
      setLoading(false); 
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  };

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Even though the API fetch works (as confirmed by the console log), the users state is not immediately reflected in the UI. The component renders "Loading..." or an empty list for a brief moment, even when data is fetched successfully.

Guidelines

• I have read and understood this category's guidelines before making this post.

[Anikesh02]

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        console.log('Fetched Users:', data); // Debugging shows correct data here
        setUsers(data);
      } catch (error) {
        console.error('Error fetching users:', error);
      } finally {
        setLoading(false); // Ensure loading is set to false in both success and failure cases
      }
    };
    fetchUsers();
  }, []); // Removed fetchUsers function from dependency array to prevent re-fetching

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Use this to fix the error

[ebndev]

Hi @bcreativex & @Anikesh02, thanks for being a part of the GitHub Community!

While we appreciate you wanting to contribute to Discussions, please note: We made the decision to disable the ability to earn Achievements in our Community in order to discourage users from participating in coordinated or inauthentic activity like rapid questions and answers in order to earn badges. You can learn more about this decision in our announcement post here Achievements will no longer be available in the Community.

As a result, we'll be unmarking the answer and locking this, and other related posts. 

Any future violations may result in a temporary or indefinite block from the Community.

Thanks for understanding and we hope to see you participate in other discussions in the future!