Skip to content

Commit 452373b

Browse files
yungstersfacebook-github-bot
authored andcommitted
RN: Further Optimize createAnimatedComponent
Summary: In addition to memoizing `mergedStyle` in `createAnimatedComponent`, this avoids unnecessary object allocations by: * Not allocating `passthroughProps`, created via a rest spread operator. It is unnecessary because we always override `style` in the JSX. * Not allocating a new object if either `style` or `passthroughStyle` are null or undefined. Also, create an array of the two style objects instead of spreading them, which is needless. Changelog: [General][Changed] - Improved performance of `Animated` components Reviewed By: sammy-SC Differential Revision: D56621191 fbshipit-source-id: ac863661c60d87c681284ce5ef5d6774b9c50653
1 parent 34331af commit 452373b

File tree

1 file changed

+7
-5
lines changed

1 file changed

+7
-5
lines changed

packages/react-native/Libraries/Animated/createAnimatedComponent.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
* @format
99
*/
1010

11+
import composeStyles from '../../src/private/core/composeStyles';
1112
import View from '../Components/View/View';
1213
import useMergeRefs from '../Utilities/useMergeRefs';
1314
import useAnimatedProps from './useAnimatedProps';
@@ -45,17 +46,18 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
4546
// without these passthrough values.
4647
// $FlowFixMe[prop-missing]
4748
const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
48-
const {style: passthroughStyle, ...passthroughProps} =
49-
passthroughAnimatedPropExplicitValues ?? {};
49+
const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
5050
const mergedStyle = useMemo(
51-
() => ({...style, ...passthroughStyle}),
52-
[style, passthroughStyle],
51+
() => composeStyles(style, passthroughStyle),
52+
[passthroughStyle, style],
5353
);
5454

55+
// NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
56+
// spread after `reducedProps` but before `style`.
5557
return (
5658
<Component
5759
{...reducedProps}
58-
{...passthroughProps}
60+
{...passthroughAnimatedPropExplicitValues}
5961
style={mergedStyle}
6062
ref={ref}
6163
/>

0 commit comments

Comments
 (0)