React/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2024-11-21 22:10:14 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

RN: Enable useInsertionEffectsForAnimations (#47595)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47595

Enables the `useInsertionEffectsForAnimations` feature flag by default. This changes `useAnimatedProps` to enqueue updates to the `AnimatedNode` graph in `useInsertionEffect` instead of `useLayoutEffect`.

The main motivation for `useInsertionEffect` is to avoid unmounting `AnimatedNode` graphs when an `Activity` subtree becomes hidden.

Both `useInsertionEffect` and `useLayoutEffect` occur during the commit phase. Although they occur at different moments in the commit phase, the different is difficult to observe and unlikely to impact product code.

One observable impact is that with `useInsertionEffect`, animations can now be started from layout effects.

Changelog:
[General][Changed] - The `AnimatedNode` graph will not occur during the insertion effect phase, which means animations can now be reliably started during layout effects.

Reviewed By: mdvacca

Differential Revision: D65906157

fbshipit-source-id: d09b2f1b76079eecafbed8c6f5d8ee4695a1f81c
This commit is contained in:
Tim Yung 2024-11-13 16:29:32 -08:00 committed by Facebook GitHub Bot
parent 3a41086809
commit 316170ce8d
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js
View File

@ -563,12 +563,11 @@ const definitions: FeatureFlagDefinitions = {
},
},
useInsertionEffectsForAnimations: {
defaultValue: false,
defaultValue: true,
metadata: {
dateAdded: '2024-09-12',
description:
'Changes construction of the animation graph to `useInsertionEffect` instead of `useLayoutEffect`.',
purpose: 'experimentation',
purpose: 'release',
},
},
useRefsForTextInputState: {

4
packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js vendored
View File

@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<09b8ae3840a5ad419c4af9f3fcc8deec>>
* @generated SignedSource<<625f763d82aeca846224a67d9580f1b7>>
* @flow strict
*/
@ -177,7 +177,7 @@ export const shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean>
/**
* Changes construction of the animation graph to `useInsertionEffect` instead of `useLayoutEffect`.
*/
export const useInsertionEffectsForAnimations: Getter<boolean> = createJavaScriptFlagGetter('useInsertionEffectsForAnimations', false);
export const useInsertionEffectsForAnimations: Getter<boolean> = createJavaScriptFlagGetter('useInsertionEffectsForAnimations', true);
/**
* Enable a variant of TextInput that moves some state to refs to avoid unnecessary re-renders