TypeError: Cannot read properties of undefined (reading 'key')

[inokawa]

Discussed in #592

^{Originally posted by mariia-mitiureva December 24, 2024}
After updating to 0.39.2 sometimes (quite rare) it crashes with the following error:

I happens randomly, not sure what can be a trigger. Did it happen to someone else?

[inokawa]

It was reported in

• [email protected] & [email protected]
• [email protected] & virtua@0.39.00.37.4

[inokawa]

https://github.com/facebook/react/blob/a160102f3aedae0da2d692e7cf53b28a011b7bc9/packages/react-reconciler/src/ReactFiberRootScheduler.js#L318
https://github.com/facebook/react/blob/a160102f3aedae0da2d692e7cf53b28a011b7bc9/packages/react-reconciler/src/ReactFiberRootScheduler.js#L530

[RobHannay]

We have this too. We can't reliably reproduce it I'm afraid.

For us, it mainly seems to happen after leaving the list open for a while, and then coming back to it (refocussing). I could be wrong though

[aeharding]

I have a reliable reproduction! For me it happens:

1. On a VList with keepMounted used for sticky items (removing keepMounted and cannot reproduce)
2. Scroll down so keepMounted is in use
3. In my app, Voyager, switch accounts (to account on same instance) which effectively just reloads with brand new items.

I believe what's happening is I am setting the keepMounted but it is slightly stale (value is set in effect), so Virtua sees keepMounted index as out-of-bounds and crashes. Essentially, going from list of 40 with keepMounted={[30]} to list of 3 items with same keepMounted until the next react cycle. So it can be fixed by a sanity check:

diff --git a/src/features/community/list/ResolvedCommunitiesList.tsx b/src/features/community/list/ResolvedCommunitiesList.tsx
index e5c39b46..18cb02cd 100644
--- a/src/features/community/list/ResolvedCommunitiesList.tsx
+++ b/src/features/community/list/ResolvedCommunitiesList.tsx
@@ -216,7 +216,9 @@ function ResolvedCommunitiesList({
             updateActiveIndex();
           }}
           as={IonList as CustomContainerComponent}
-          keepMounted={activeIndex >= 0 ? [activeIndex] : []}
+          keepMounted={
+            activeIndex >= 0 && activeIndex < items.length ? [activeIndex] : []
+          }
           item={StickyItem}
         >
           {items.map((item, index) => (

See here for more: aeharding/voyager#1799 (comment)

Not sure if this is the same issue everyone else is experiencing? If so maybe Virtua could add a sanity check and ignore out of bounds keepMounted to avoid crash

[RobHannay]

Ah yes! Smoking gun. We're also using keepMounted for sticky headers

[inokawa]

Thanks for the help! keepMounted has no range check and that's expected one. It's recommend to set it by yourself for now.

Although, I got the same error without keepMounted prop. So I'm still investigating. Still not sure it's related to 0.39.

[mgraczyk]

FWIW I am seeing this error without using keepMounted. Seems to happen whenever one of the items changes size

[atsui-affinity]

I'm seeing this error without using keepMounted as well for Virtualizer. Also, my usecase is when the number of item changes. This problem started happening after version 0.37.0

[miapolis]

0.37.0 removed the default overscan value of 4

@@ -171,11 +170,11 @@
   {
     children,
     count: renderCountProp,
-    overscan = 4,
-    keepMounted,
+    overscan,

Adding overscan={4} to Virtualizer fixed the issue for me on 0.40.0.

[atsui-affinity]

0.37.0 removed the default overscan value of 4

@@ -171,11 +170,11 @@
{
children,
count: renderCountProp,

• overscan = 4,
• keepMounted,

• overscan,
  Adding overscan={4} to Virtualizer fixed the issue for me on 0.40.0.

Thank you for the information. I attempted to add overscan={4}, but unfortunately, the error persists