Why does my react-aria custom grid list not update correctly

[marcuslindfeldt]

I have written a custom grid list component InteractiveList based of the example in the docs https://react-spectrum.adobe.com/react-aria/useGridList.html#example

When I use the list and want to dynamically update all the items it does not update correctly.

<InteractiveList
  aria-label="Dashboards"
  items={formData.dashboards}
>
  {(dashboard: Dashboard) => (
    <Item key={dashboard.id} textValue={dashboard.name}>
      <DashboardSlice dashboard={dashboard}>
        <SliceAction
          label="Remove"
          onPress={() => {
            onChange(
              produce((draft) => {
                const index = draft.dashboards.findIndex(
                  (item) => item.id === dashboard.id
                );
                if (index !== -1) draft.dashboards.splice(index, 1);
              })
            );
          }}
        >
          <SliceIconRemove />
        </SliceAction>
      </DashboardSlice>
    </Item>
  )}
</InteractiveList>

I'm using immer to produce a new copy of the entire list when the delete item button is pressed. This results in an entirely new formData object.

But it seems react-stately is doing some caching or something because unless I copy each dashboard object in formData.dashboards e.g by using structuredClone(formData.dashboards) the list does not update correctly.

What is happening here? Is an old "version" of onChange run because the item is being cached by react-stately?

[reidbarber]

Using the items prop and providing a render function allows React Spectrum to automatically cache the results of rendering each item and avoid re-rendering all items in the collection when only one of them changes. This has big performance benefits for large collections.

Does this page from the docs help?

[marcuslindfeldt]

It did! The problem was a mistake in one of the components higher up in the tree. I didn't actually get a copy of my object as I thought and as the docs state the items need to be immutable. Thanks!

[ddaeyongee]

This issue can occur due to the way React manages state. React enhances rendering performance by comparing previous and current states and updating only the changes. However, sometimes it may fail to properly compare states.

Here, the problem arises because although the formData.dashboards array has been modified, React fails to detect it. This is because the produce function of Immer creates a new array, but the internal items maintain the same references. When React compares the differences between the previous and new states, it doesn't detect any changes in the references of the items.

To solve this issue, when creating a new array with the produce function, the internal items should also be copied to new objects. Using the structuredClone function is one way to achieve this, but another approach is to leverage the built-in features of Immer. You can use Immer's draftToImmutable function to convert the modified objects into immutable objects.

onChange(
  produce((draft) => {
    draft.dashboards = draft.dashboards.filter((item) => item.id !== dashboard.id);
  })
);

By doing this, React will correctly detect the changed state and perform the update accordingly.