TanStackT
TanStack•5mo ago•
2 replies
rubber-blue

Race condition when updating table data

Hi!
I have a rather basic shadcn styled table that shows info from a database. Before the table is a dropdown to select an infoset.

The data itself works well, editing works, pushing changes to the server works too.
But showing info only works initially. When I show table and want to select a different dataset, it fetches it and then sets a useState variable which holds the shown data. But it just does not re render for some reason.

I've tried taking the thing apart since it feels like i am messing up something really basic.

Updating the data:
This works, but is obviously not intended since i have to use a delay
  useEffect(() => {
    if (!dataFetch?.success) {
      return;
    }
    setTableData([]);
    delay(100).then(() => {
      setTableData(dataFetch.data.rows);
    });
  }, [dataFetch]);

What does not work:
Removing the delay: Will indefinitely show the previous dataset (not empty!)
setTableData([]);
setTableData(dataFetch.data.rows);


Forcing a new object/array:
setTableData([]);
setTableData([...dataFetch.data.rows]);


This makes me think its some kind of race condition?
Was this page helpful?