Is renderItem expected to be called for removed items?

[JustJoostNL]

Hey @MatiPl01

I'm experiencing a case where after removing an item from the data array, the renderItem function is still called for the removed item during an intermediate render. This causes errors when my renderItem function accesses external state that has already been updated.

const [items, setItems] = useState([{ id: 1 }, { id: 2 }, { id: 3 }]);
const [itemData, setItemData] = useState({ 1: "A", 2: "B", 3: "C" });

const removeItem = (id: number) => {
  // Update external state
  setItemData((prev) => {
    const next = { ...prev };
    delete next[id];
    return next;
  });
  // Remove from grid
  setItems((prev) => prev.filter((item) => item.id !== id));
};

const renderItem = ({ item }) => {
  const data = itemData[item.id]; // ERROR: undefined after removal
  return <Text>{data.name}</Text>;
};

return (
  <Sortable.Grid
    data={items}
    renderItem={renderItem}
    keyExtractor={(item) => item.id.toString()}
    // ...
  />
);

Question:
Is this expected behavior? I would expect that when an item is removed from data, renderItem should not be called for that item anymore.

Workaround:

Setting itemExiting={null} does not fix this issue. I thought it could be related to animations?

The only workaround I found is adding a key prop based on the array length, which forces a full remount of the grid:

<Sortable.Grid
  key={`grid-${items.length}`}
  data={items}
  renderItem={renderItem}
  // ...
/>

This works though hurts the performance.

[MatiPl01]

Hey @JustJoostNL!

When do you expect this behavior? Can you share the entire code snippet and tell me how to test it out to reproduce the issue? renderItem should be called only for rendered items, not for removed ones and I couldn't see it being called incorrectly when I tested a similar implementation to the code snippet that you shared.

[MatiPl01]

Ok, I can see the problem. In my current implementation I am updating grid items with some delay (I use the useEffect function in the ItemsProvider here to update the store that contains all items data.

In your implementation you keep all items data in the ItemsContext, which you use in ItemWrapper. After you call the removeItem function, the item is removed from the items array in the context but the item component is still rendered because the item hasn't been removed yet from the store that I use in ItemsProvider. As a result, your ItemWrapper component re-renders because of the context update (not because of the additional renderItem call). Because the ItemChild component, which calls the item.nativeResource.getValue(), is not memoized, it also re-renders. Given that you marked the resource as released by setting it via item.nativeResource.isReleased = true; in the setItems call, the resource is already marked as released and you can see the app crashing.

---

What I recommend as the simplest solution is wrapping ItemChild in the memo function to memoize it and avoid unnecessary re-renders when the ItemWrapper is re-rendered.

A better solution would require reimagining the context usage logic and moving the use of context to the parent component from grid items. The use of context that changes very often in each item is not a good practice as it triggers renders of all grid items every time you add/remove a single item.

[MatiPl01]

I'll also try to make store changes synchronous but I don't know if it will work. Will play with this a bit.

[JustJoostNL]

I appreciate the in-depth analysis! In my real implementation it’s a bit more complex. I pass properties of the item (e.g. a player instance) into native event listeners. When the item is removed, that native object can be released while the component is still mounted, and it will still be passed into those listeners (regardless of memo) which causes a crash. So memoization alone wouldn’t solve it in my case. Reimagining the context logic could work too (and is surely needed in the future), but doesn't address the core issue. I'm curious to see whether synchronous store changes would work.

[MatiPl01]

When the item is removed, that native object can be released while the component is still mounted

How is this native object released? If you release it manually while chaning state (items in the context) you can simply move this native state cleanup to the useEffect used within this component. In general, cleaning up the native state right away in the callback, independent from the component that depends on this state, doesn't seem to be a valid and safe approach.

I'd suggest doing something like this if possible:

function GridItem() {
  useEffect(() => {
    return () => {
      // perform cleanup here
    };
  }, []);
}

I'm curious to see whether synchronous store changes would work.

I made a few attempts but all of them ended up in React throwing errors that I tried updating state while other state is being updated. Because of that, I think that I should leave the current implementation as is.

[JustJoostNL]

you can simply move this native state cleanup to the useEffect used within this component

Yeah this is what I ended up doing, it came with some other side effects, but I can work around those. 🙂
Thanks for your help!