Tinacms: Tina renders all inline blocks on change to any block

[grncdr]

Description

When using the inline blocks component, it appears that a change to any block will cause the entire array of blocks to be re-rendered. When combined with relatively heavy editing components (such as InlineWysiwyg) this makes editing slow enough to be unusable.

Steps to reproduce

I've created a reproduction repo here: https://github.com/grncdr/tina-wysiwyg-performance The relevant code was just added directly to App.js. Clone it, run yarn && yarn start and try editing. You should see that the performance is quite bad, and gets worse as you add more fields.

Expected result

Editing a field only re-renders that field.

Actual result

Editing any field re-renders all fields.

Environment

Tinacms Package Versions

├─┬ [email protected]
├─┬ [email protected]
└─┬ [email protected]
  ├── @tinacms/[email protected]
  ├── @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├── @tinacms/[email protected]
  ├── @tinacms/[email protected]
  ├── @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├── @tinacms/[email protected]
  ├── @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]
  ├─┬ @tinacms/[email protected]

Tools

| Tool | Version |
| ------- | ------- |
| browser | Firefox, Safari, and Chrome, all latest stable versions. |
| os | OS X |

[ncphillips]

Thanks for the report @grncdr!

I started digging into and took some notes during the process which I've documented in the above issue.

[dwalkr]

Thanks for the reproduction @grncdr !

I just tested it against #1572 and determined that 611fc70eaba95168db9531f35d283d69dfe56e05 fixes the issue for the InlineText field, but not the InlineWysiwyg. I'll keep digging to see if there are any easy optimizations we can make for InlineWysiwyg to improve the situation.

[dwalkr]

The performance improvements introduced by #1613 have mitigated the slowdown in the demo site you've provided. There are still scenarios where parts of the inline blocks stack are rerendering when it seems like they shouldn't, but the impact on performance is significantly reduced.

Performance is going to be a continuously moving target. Our work on this front isn't done, but the inline blocks experience is improved enough that I think this issue can be closed.

We're still testing the improvements, but they will be bundled in our next release. If you want to try them out early, the prerelease can be installed via the next channel:

yarn add react-tinacms-inline@next react-tinacms-editor@next