react-native-skeleton-content-nonexpo icon indicating copy to clipboard operation
react-native-skeleton-content-nonexpo copied to clipboard

Performance Improvements, React.memo isn't really usefull except we

Open mernxl opened this issue 4 years ago • 1 comments

Is your feature request related to a problem? Please describe.

Ok i have been looking through the library trying to see how i can gain on performance and reduce rerenders since i use this package excessively within my applications. I mean, about 40% of all my components use it.

I noticed the SkeletonContent (here on called SC) component always re renders even when props don't change, this is caused by children prop always changing when re-rendering the component containing the SC. This is also caused by declaring the layout directly as a prop on SC inside render.

Describe the solution you'd like I have a series of solutions to help increase performance,

  1. Remove React.memo on the current SkeletonContent component since it will always re render, will remove the toll on the memory.
  2. Create another component that a user performance cautious user may opt in to use. It will have a component and componentProps amongst other SC props. Note that component is a ReactComponent and not a ReactNode that way it doesn't change as children does.
  • Wrap this newly created component with a React.memo HOC, then pass an equal function that will shallowly compare the content of componentProps to tell whether a rerender is needed or not. It also checks other props.
  • With this approach, we still have the issue where the user passes an array (not a constant or memoized value) to layout prop. An easy fix is to create constant layouts or memoize one which changes before passing to the SC

NOTE: Approach 2 will also fix an issue I for one have with rendering the children when isLoading is true. I personally do not really like the functionality. Approach 2 only renders the component when isLoading is false. This is quite a big gain in performance as the component is only rendered when needed.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

mernxl avatar Nov 19 '20 09:11 mernxl

Hi! Any PR proposal here? :)

alexZajac avatar Dec 03 '22 15:12 alexZajac