From be06fd4e22a500128d202436600381b8bc17b3f5 Mon Sep 17 00:00:00 2001 From: David Rickard Date: Fri, 26 Apr 2024 00:38:43 -0700 Subject: [PATCH] Fix memoization for Animated components when no style is passed in Summary: Any component wrapped via `createAnimatedComponent()` will always re-render, because it creates a new `style` object. It's impossible to memoize. Adding `useMemo()` here ensures that the `style` object passed to the underlying object is stable: if no `style` is passed to the wrapped component, then memoization can work. Allowing memoization to function when the `style` object is passed in will require a deeper fix. See https://fb.workplace.com/groups/rn.support/permalink/26084643474490921/ Before: {F1496803038} After: {F1496805410} ## Changelog: [General] [Fixed] - Fixed memoization for components wrapped with createAnimatedComponent Differential Revision: D56618868 fbshipit-source-id: a0af8b1a02c34b5cf6e6d7e9f0381fb323b232cc --- .../Libraries/Animated/createAnimatedComponent.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js index 78b66e09481..6dcda30a060 100644 --- a/packages/react-native/Libraries/Animated/createAnimatedComponent.js +++ b/packages/react-native/Libraries/Animated/createAnimatedComponent.js @@ -12,6 +12,7 @@ import View from '../Components/View/View'; import useMergeRefs from '../Utilities/useMergeRefs'; import useAnimatedProps from './useAnimatedProps'; import * as React from 'react'; +import {useMemo} from 'react'; // $FlowFixMe[deprecated-type] export type AnimatedProps = $ObjMap< @@ -46,7 +47,10 @@ export default function createAnimatedComponent( const {passthroughAnimatedPropExplicitValues, style} = reducedProps; const {style: passthroughStyle, ...passthroughProps} = passthroughAnimatedPropExplicitValues ?? {}; - const mergedStyle = {...style, ...passthroughStyle}; + const mergedStyle = useMemo( + () => ({...style, ...passthroughStyle}), + [style, passthroughStyle], + ); return (