react-native-skeleton-content-nonexpo
react-native-skeleton-content-nonexpo copied to clipboard
Performance Improvements, React.memo isn't really usefull except we
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,
- Remove
React.memo
on the currentSkeletonContent
component since it will always re render, will remove the toll on the memory. - Create another component that a user performance cautious user may opt in to use. It will have a
component
andcomponentProps
amongst other SC props. Note thatcomponent
is aReactComponent
and not aReactNode
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 ofcomponentProps
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 createconstant
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.
Hi! Any PR proposal here? :)