PLAT-109381: Reduce the ImageItem render time

[ybsung]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

One of the major cause for the list scroll performance is the long JS execution time of the ImageItem. So we need to reduce the ImageItem render time.

Resolution

1. Memoization of the kind computed values and some React elements.
2. Pass children for caption, label for subcaption, imageIconComponent, imageIconSrc, and src not as props but thought a context so that we don't have to render several components again.
3. Update the caption, subcaption, and data-index DOM elements directly instead of rendering components.

By doing it, the number of the React elements rendering could be reduced.

For example, with the develop branch without the PR
14 React elements are re-rendered to update the src from the sandstone/ImageItem (ImageItem in the diagram below) to the ui/Image (ui:Image in the diagram below).

With the PR
only some of those React elements are re-rendered to do it because the src will be passed through a context from the Context.Provider in the sandstone/Image to Context.Consumber before ui/Image.

As we do with the src, children for the caption, label for the subcaption, imageIconComponent, and imageIconSrc are also passed through a context. Those props are one being updated frequently while scrolling a VirtualList (or VirtualGridList) and swapping items.

Therefore we could enhance the list scroll performance by reducing the ImageItem rendering time. It's the major cause for the low performance.

Additional Considerations

Links

PLAT-109381
Related PR: enactjs/enact#2790
Previous branch: https://github.com/enyojs/sandstone/tree/PLAT-109381-useMemo2

Comments

Enact-DCO-1.0-Signed-off-by: YB Sung ([email protected])

[MikyungKim]

LGTM!

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[ybsung]

Due to Contributor License Agreement, I'd like to close this PR.