Editor Crash when saving post with large/complex List Block V2

[thehenrybyrd]

Describe the bug
Using List Block V2, having created a list with many items and several levels of indentation, the editor appears to crash when saving the post.
I experience a flash of dark screen, and then end up back on the Menu screen instead of the Post list.
I was able to reproduce this consistently on both a self-hosted temp site from tastewp.com and an internal temp site.
Tested on the Jetpack Android app.

To Reproduce
Steps to reproduce the behavior:

1. Make sure you're using Gutenberg 13.8.2, and enable List block v2 in Experiments.
2. Create a new post, and add a list block.
3. Write a list of 30-50 items, with some items indented in to 5 levels.
4. Tap the back arrow to save the post.
5. Note the post begins saving, and then a small crash occurs.
6. Note you are now on the Menu screen instead of the Post list.

I was also able to get what I believe to be the same crash even more efficiently:
2. Create a new post, and add a list block.
3. Write a list of 5 items, each more indented than the last.
4. Tap the back arrow to save the post.
5. See the crash.

Screenshots
Crash with short, multi-indent list:

indentationcrash.mp4

Crash with long, multi-indent list:

longlistcrash.mp4

Smartphone
Tested on Samsung Galaxy S21, Android 12, WPAndroid 20.5-rc-1

[geriux]

After some investigation, this is happening when several InnerBlocks are nested, depending on the amount of Views that are in the tree. I tested this with the Quote block (V2) and after nesting several Quote blocks it happens as well.

We had an issue that is similar on iOS a while back but it would crash as soon as you'd reach the nesting limit. On Android is crashing when closing the editor, I haven't found any reported issue for Android though. I'll keep investigating but unfortunately, I haven't found a solution yet.

[geriux]

Just confirmed this happens on iOS as well (with the app open), tried to nest 10 Quote blocks.

For the List block takes fewer blocks to get it to crash, for example, a List block that has more than 4 nested lists blocks.

[fluiddot]

This fix should improve this crash situation 🎊 . Although, I'd like to note that doesn't entirely address it because it can still be reproduced when having 10+ nested items in the List block V2. However, it's unlikely that users will have List blocks with more than 5 levels, so hopefully, the fix will prevent the crash in most cases 🤞 .

[dcalhoun]

Hey @geriux. 👋🏻 From working on #5617, I had two questions regarding this issue.

First, should we close this issue or keep it open until we more thoroughly address the root cause? I see it is currently assigned to you and marked as "In progress."

After some investigation, this is happening when several InnerBlocks are nested, depending on the amount of Views that are in the tree. I tested this with the Quote block (V2) and after nesting several Quote blocks it happens as well.
– #5097

Currently, there's a limit in both iOS and Android for nested components, with List V2 we are reaching this limit easily by nesting just a couple of blocks.
– WordPress/gutenberg#43431

Second, do we have any resources that validate that the number of nested Views is the origin of the crash? Specifically, did we find corroborating issues in the React Native repository or create a test case outside of Gutenberg that validates the View theory? I ask as I would like to understand if the root issue is deep trees in general, deep trees of Views (or any visually rendered view), or some other aspect of Gutenberg's deep tree.

Thanks!

[dcalhoun]

As an immediate follow-up to one of my own questions 😄, I now see some research was completed on this subject for Group and Columns blocks. That research seems to validate that deeply nested Views — or at least visually rendered elements components — in fact, are the problem. It also appears that the depth count that creates a crash is a moving target, one that can improve or worsen between React Native releases.

Let me know if there are other corroborating resources. 🙇🏻

[geriux]

First, should we close this issue or keep it open until we more thoroughly address the root cause? I see it is currently assigned to you and marked as "In progress."

I think we can close it, although there is still a limitation I consider those an edge case and so far we haven't received any reports or crashes about it 🤞

As an immediate follow-up to one of my own questions 😄, I now see some #1935 (comment) on this subject for Group and Columns blocks. That research seems to validate that deeply nested Views — or at least visually rendered elements — in fact, are the problem. It also appears that the depth count that creates a crash is a moving target, one that can improve or worsen between React Native releases.

I was about to share that issue 😄 yeah, I even used that example with just Views and I was able to see the crash 😅

I think there's not much info about it or solutions because it is very rare to nest that many views (at least in my experience with React Native), so that's why we are trying to limit it as much as we can. I don't have any other links to issues or discussions about that problem at the moment.

[dcalhoun]

I think we can close it, although there is still a limitation I consider those an edge case and so far we haven't received any reports or crashes about it 🤞

Makes sense to me.

Thanks for the additional information. We can likely continue discussion in #5617 or #1935.