React state updates inside async function not updating UI — what am I doing wrong?

[MergenD]

Body

Hi everyone,

I’m stuck with a strange React issue. I’m trying to update state inside an async function, but the UI never updates even though the state does change when I log it.

Here’s the simplified version of my component:

import { useState } from "react";

export default function Demo() {
  const [items, setItems] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);

  const loadData = async () => {
    setLoading(true);

    const res = await fetch("/api/data");
    const data = await res.json();

    console.log("Fetched:", data); 
    setItems(data); // UI does NOT update 🤷‍♂️
    
    setLoading(false); 
  };

  return (
    <div>
      <button onClick={loadData}>Load</button>

      {loading && <p>Loading...</p>}

      <ul>
        {items.map((i) => (
          <li key={i}>{i}</li>
        ))}
      </ul>
    </div>
  );
}

The weird part:

• When I click the button → API request happens.
• data logs correctly.
• setItems(data) does not update the list.
• items is always empty unless I click the button twice.
• I’ve tried using useEffect, wrapping with useCallback, even converting to async/await differently — still the same.

Is something wrong with my code structure? Why is the UI not re-rendering even though setState is called?

Would really appreciate any help.

Guidelines

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

[Zwique]

React State Not Updating in Async Function

Sometimes React doesn’t update the UI after calling setItems(data) because React only re-renders when the state value has a new reference.
If your API returns the same array object, React thinks nothing changed.

✅ Fix

Force a new array so React detects a change:

setItems([...data]);

If using Next.js

fetch("/api/data", { cache: "no-store" });

This ensures the request always returns fresh data.

[kyyasilmyradovv]

Wrap your async function in useCallback:

const loadData = useCallback(async () => {
  setLoading(true);

  const res = await fetch("/api/data");
  const data = await res.json();

  setItems(data); // updates correctly now
  setLoading(false);
}, []);

This ensures React works with the same stable function reference and doesn’t create stale closures.