Skip to content

Commit

Permalink
RN: Enable useInsertionEffectsForAnimations (#47595)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #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
  • Loading branch information
yungsters authored and facebook-github-bot committed Nov 14, 2024
1 parent 3a41086 commit 316170c
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 316170c

Please sign in to comment.