T
TanStack•2mo ago
evident-indigo

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]);
  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);
setTableData([]);
setTableData(dataFetch.data.rows);
Forcing a new object/array: 
setTableData([]);
setTableData([...dataFetch.data.rows]);
setTableData([]);
setTableData([...dataFetch.data.rows]);
This makes me think its some kind of race condition?
2 Replies
optimistic-gold
optimistic-gold•4w ago
Forget the table and data. How are you displaying your table component? This pretty much sounds like a key issue to me. When you select an infoset with the dropdown, ensure that you assign a new key to your components that you want to refresh. React will only update the dom when the layout changes, (unless you force it with unnecessary useEffect’s, etc which will cause you more bugs in the end). So if I have a dropdown and a table, I’d do something like this… <Dropdown value=“dataset2” /> <Table key=“dataset2” />
optimistic-gold
optimistic-gold•4w ago
Here's some more info on the issue you're likely witnessing: https://react.dev/learn/preserving-and-resetting-state#same-component-at-the-same-position-preserves-state
Preserving and Resetting State – React
The library for web and native user interfaces

Did you find this page helpful?