diff --git a/src/__tests__/render.test.tsx b/src/__tests__/render.test.tsx
index 25e745e9e..f39d3228b 100644
--- a/src/__tests__/render.test.tsx
+++ b/src/__tests__/render.test.tsx
@@ -4,6 +4,40 @@ import { Text, View } from 'react-native';
 import { render, screen } from '..';
 import { _console, logger } from '../helpers/logger';
 
+function MaybeSuspend({
+  children,
+  promise,
+  suspend,
+}: {
+  children: React.ReactNode;
+  promise: Promise<unknown>;
+  suspend: boolean;
+}) {
+  if (suspend) {
+    React.use(promise);
+  }
+
+  return children;
+}
+
+function TestSuspenseWrapper({
+  children,
+  promise,
+  suspend,
+}: {
+  children: React.ReactNode;
+  promise: Promise<unknown>;
+  suspend: boolean;
+}) {
+  return (
+    <React.Suspense fallback={<Text>Loading...</Text>}>
+      <MaybeSuspend promise={promise} suspend={suspend}>
+        {children}
+      </MaybeSuspend>
+    </React.Suspense>
+  );
+}
+
 test('renders a simple component', async () => {
   const TestComponent = () => (
     <View testID="container">
@@ -77,6 +111,203 @@ describe('render options', () => {
   });
 });
 
+describe('hidden instance props', () => {
+  test('does not retain hidden UI when the component suspends on initial render', async () => {
+    const promise = new Promise<unknown>(() => {});
+
+    await render(
+      <TestSuspenseWrapper promise={promise} suspend>
+        <View testID="hidden-target">
+          <Text>Ready</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('Loading...')).toBeOnTheScreen();
+    expect(screen.queryByTestId('hidden-target')).not.toBeOnTheScreen();
+    expect(screen.queryByTestId('hidden-target', { includeHiddenElements: true })).toBeNull();
+    expect(screen.toJSON()).toMatchInlineSnapshot(`
+      <Text>
+        Loading...
+      </Text>
+    `);
+  });
+
+  test('sets hidden suspended elements with no style to display none', async () => {
+    const promise = new Promise<unknown>(() => {});
+
+    await render(
+      <TestSuspenseWrapper promise={promise} suspend={false}>
+        <View testID="hidden-target">
+          <Text>Ready</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('Ready')).toBeOnTheScreen();
+
+    await screen.rerender(
+      <TestSuspenseWrapper promise={promise} suspend>
+        <View testID="hidden-target">
+          <Text>Ready</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('Loading...')).toBeOnTheScreen();
+    expect(
+      screen.getByTestId('hidden-target', { includeHiddenElements: true }).props.style,
+    ).toEqual({
+      display: 'none',
+    });
+    expect(screen.toJSON()).toMatchInlineSnapshot(`
+      <>
+        <View
+          style={
+            {
+              "display": "none",
+            }
+          }
+          testID="hidden-target"
+        >
+          <Text>
+            Ready
+          </Text>
+        </View>
+        <Text>
+          Loading...
+        </Text>
+      </>
+    `);
+  });
+
+  test('appends display none when suspending an element with existing style', async () => {
+    const promise = new Promise<unknown>(() => {});
+
+    await render(
+      <TestSuspenseWrapper promise={promise} suspend={false}>
+        <View style={{ opacity: 0.5 }} testID="hidden-target">
+          <Text>Ready</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('Ready')).toBeOnTheScreen();
+
+    await screen.rerender(
+      <TestSuspenseWrapper promise={promise} suspend>
+        <View style={{ opacity: 0.5 }} testID="hidden-target">
+          <Text>Ready</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('Loading...')).toBeOnTheScreen();
+    expect(
+      screen.getByTestId('hidden-target', { includeHiddenElements: true }).props.style,
+    ).toEqual([{ opacity: 0.5 }, { display: 'none' }]);
+    expect(screen.toJSON()).toMatchInlineSnapshot(`
+      <>
+        <View
+          style={
+            [
+              {
+                "opacity": 0.5,
+              },
+              {
+                "display": "none",
+              },
+            ]
+          }
+          testID="hidden-target"
+        >
+          <Text>
+            Ready
+          </Text>
+        </View>
+        <Text>
+          Loading...
+        </Text>
+      </>
+    `);
+  });
+
+  test('applies hidden styles to multiple direct child views when suspending', async () => {
+    const promise = new Promise<unknown>(() => {});
+
+    await render(
+      <TestSuspenseWrapper promise={promise} suspend={false}>
+        <View testID="hidden-target-1">
+          <Text>First</Text>
+        </View>
+        <View style={{ opacity: 0.5 }} testID="hidden-target-2">
+          <Text>Second</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('First')).toBeOnTheScreen();
+    expect(screen.getByText('Second')).toBeOnTheScreen();
+
+    await screen.rerender(
+      <TestSuspenseWrapper promise={promise} suspend>
+        <View testID="hidden-target-1">
+          <Text>First</Text>
+        </View>
+        <View style={{ opacity: 0.5 }} testID="hidden-target-2">
+          <Text>Second</Text>
+        </View>
+      </TestSuspenseWrapper>,
+    );
+
+    expect(screen.getByText('Loading...')).toBeOnTheScreen();
+    expect(
+      screen.getByTestId('hidden-target-1', { includeHiddenElements: true }).props.style,
+    ).toEqual({
+      display: 'none',
+    });
+    expect(
+      screen.getByTestId('hidden-target-2', { includeHiddenElements: true }).props.style,
+    ).toEqual([{ opacity: 0.5 }, { display: 'none' }]);
+    expect(screen.toJSON()).toMatchInlineSnapshot(`
+      <>
+        <View
+          style={
+            {
+              "display": "none",
+            }
+          }
+          testID="hidden-target-1"
+        >
+          <Text>
+            First
+          </Text>
+        </View>
+        <View
+          style={
+            [
+              {
+                "opacity": 0.5,
+              },
+              {
+                "display": "none",
+              },
+            ]
+          }
+          testID="hidden-target-2"
+        >
+          <Text>
+            Second
+          </Text>
+        </View>
+        <Text>
+          Loading...
+        </Text>
+      </>
+    `);
+  });
+});
+
 describe('component rendering', () => {
   test('render accepts RCTText component', async () => {
     await render(React.createElement('RCTText', { testID: 'text' }, 'Hello'));
diff --git a/src/render.tsx b/src/render.tsx
index cddbd75b3..3e6029133 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { StyleProp } from 'react-native';
 import {
   createRoot,
   type HostElement,
@@ -39,6 +40,10 @@ export async function render<T>(element: React.ReactElement<T>, options: RenderO
   const rendererOptions: RootOptions = {
     textComponentTypes: HOST_TEXT_NAMES,
     publicTextComponentTypes: ['Text'],
+    transformHiddenInstanceProps: ({ props }) => ({
+      ...props,
+      style: withHiddenStyle(props.style as StyleProp<StyleLike>),
+    }),
   };
 
   const wrap = (element: React.ReactElement) => (Wrapper ? <Wrapper>{element}</Wrapper> : element);
@@ -117,3 +122,13 @@ function makeDebug(renderer: Root): DebugFunction {
   }
   return debugImpl;
 }
+
+type StyleLike = Record<string, unknown>;
+
+function withHiddenStyle(style: StyleProp<StyleLike>): StyleProp<StyleLike> {
+  if (style == null) {
+    return { display: 'none' };
+  }
+
+  return [style, { display: 'none' }];
+}