From 316170ce8d0aac1df3261c792b9f768665d134c5 Mon Sep 17 00:00:00 2001
From: Tim Yung <yungsters@meta.com>
Date: Wed, 13 Nov 2024 16:29:32 -0800
Subject: [PATCH] RN: Enable `useInsertionEffectsForAnimations` (#47595)

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
---
 .../scripts/featureflags/ReactNativeFeatureFlags.config.js   | 5 ++---
 .../src/private/featureflags/ReactNativeFeatureFlags.js      | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js
index 1bb99cae8ec..899674429e4 100644
--- a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js
+++ b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js
@@ -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: {
diff --git a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js
index efc0adc5f0e..fda5cef1663 100644
--- a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js
+++ b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js
@@ -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