adobe / uxp-optimized

Repository for uxp optimized react and javascript components.
MIT License
16 stars 7 forks source link

Preserve memoized functions between renders #11

Closed lanther closed 4 years ago

lanther commented 4 years ago

I did some profiling and it looks like the biggest JS cost is continually calling the item key/rect/type functions.

These are supposed to be memoized, but the memoized function gets recreated every time you render (which happens every time you scroll) - so overall the memoization adds more cost than it saves while scrolling.

If we use the useMemo react hook, you can save these functions between render calls, and only recreate them if the props change - i.e. the functions themselves change, or the items passed in changed.

Note that this does assumes that the items array is immutable (i.e. you'd pass in a new items array when the layout changes), so it's behaving like a PureComponent - if you think that's not a requirement you want to make, then we could control this optimization via a prop.

lanther commented 4 years ago

@krisnye FYI ^

krisnye commented 4 years ago

Very nice. Can you run yarn watch_sample and verify that the all the sample layouts works. (Flow, progressive, manual).

krisnye commented 4 years ago

I checked the samples. They all still work fine. Deployed this as 1.0.35