diff --git a/src/createAnimatedComponent.js b/src/createAnimatedComponent.js
index 57dfd997dab5..ababd7eab12a 100644
--- a/src/createAnimatedComponent.js
+++ b/src/createAnimatedComponent.js
@@ -20,6 +20,7 @@ import {
   DefaultLayout,
 } from './reanimated2/layoutReanimation/defaultAnimations/Default';
 import { isJest, isChromeDebugger } from './reanimated2/PlatformChecker';
+import { initialUpdaterRun } from './reanimated2/animation';
 
 const NODE_MAPPING = new Map();
 
@@ -77,6 +78,7 @@ export default function createAnimatedComponent(Component, options = {}) {
     _invokeAnimatedPropsCallbackOnMount = false;
     _styles = null;
     _viewTag = -1;
+    _isFirstRender = true;
 
     constructor(props) {
       super(props);
@@ -456,7 +458,14 @@ export default function createAnimatedComponent(Component, options = {}) {
             if (style && style.viewDescriptors) {
               // this is how we recognize styles returned by useAnimatedStyle
               style.viewsRef.add(this);
-              return style.initial.value;
+              if (this._isFirstRender) {
+                return {
+                  ...style.initial.value,
+                  ...initialUpdaterRun(style.initial.updater),
+                };
+              } else {
+                return style.initial.value;
+              }
             } else {
               return style;
             }
@@ -507,6 +516,10 @@ export default function createAnimatedComponent(Component, options = {}) {
         props.animatedStyle = this.animatedStyle;
       }
 
+      if (this._isFirstRender) {
+        this._isFirstRender = false;
+      }
+
       const platformProps = Platform.select({
         web: {},
         default: { collapsable: false },
diff --git a/src/reanimated2/hook/useAnimatedStyle.ts b/src/reanimated2/hook/useAnimatedStyle.ts
index 103c29ac2c52..7a7a44877a28 100644
--- a/src/reanimated2/hook/useAnimatedStyle.ts
+++ b/src/reanimated2/hook/useAnimatedStyle.ts
@@ -57,6 +57,7 @@ interface AnimatedState {
 interface AnimationRef {
   initial: {
     value: AnimatedStyle;
+    updater: () => AnimatedStyle;
   };
   remoteState: AnimatedState;
   sharableViewDescriptors: SharedValue<Descriptor[]>;
@@ -428,6 +429,7 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
     initRef.current = {
       initial: {
         value: initialStyle,
+        updater: updater,
       },
       remoteState: makeRemote({ last: initialStyle }),
       sharableViewDescriptors: makeMutable([]),
@@ -443,7 +445,6 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
   const { initial, remoteState, sharableViewDescriptors } = initRef.current!;
   const maybeViewRef = NativeReanimated.native ? undefined : viewsRef;
 
-  initial.value = initialUpdaterRun(updater);
   useEffect(() => {
     let fun;
     let upadterFn = updater;