From c2f0d82d6df4c651d8881652b57018d39e868770 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 12 Feb 2025 10:41:30 -0300
Subject: [PATCH 1/3] feat(fuselage): `useInsertionEffect` in Box `useStyle`

---
 packages/fuselage/src/hooks/useStyle.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/hooks/useStyle.ts b/packages/fuselage/src/hooks/useStyle.ts
index cbf25000ed..03285d18eb 100644
--- a/packages/fuselage/src/hooks/useStyle.ts
+++ b/packages/fuselage/src/hooks/useStyle.ts
@@ -5,7 +5,7 @@ import {
   transpile,
   attachRules,
 } from '@rocket.chat/css-in-js';
-import { useDebugValue, useLayoutEffect, useMemo } from 'react';
+import { useDebugValue, useInsertionEffect, useMemo } from 'react';
 
 export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
   const content = useMemo(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
@@ -20,7 +20,7 @@ export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
 
   useDebugValue(className);
 
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     if (!content || !className) {
       return;
     }

From 203c7430b070de9d2faab2c54293a0c7a5160909 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 12 Feb 2025 11:16:29 -0300
Subject: [PATCH 2/3] feat(styled): `useInsertionEffect` in styled package

---
 packages/styled/src/styled.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styled/src/styled.ts b/packages/styled/src/styled.ts
index f9f12d6830..0213121e91 100644
--- a/packages/styled/src/styled.ts
+++ b/packages/styled/src/styled.ts
@@ -19,7 +19,7 @@ import {
   forwardRef,
   Fragment,
   useDebugValue,
-  useLayoutEffect,
+  useInsertionEffect,
 } from 'react';
 
 export const attachClassName = <P extends { className?: string }>(
@@ -85,7 +85,7 @@ const styled =
 
           useDebugValue(computedClassName);
 
-          useLayoutEffect(() => {
+          useInsertionEffect(() => {
             const escapedClassName = escapeName(computedClassName);
             const transpiledContent = transpile(
               `.${escapedClassName}`,

From 6207253ea8a946afb44cce23b12e22c24766a15b Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 12 Feb 2025 11:49:34 -0300
Subject: [PATCH 3/3] chore: changeset

---
 .changeset/ninety-cherries-pull.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/ninety-cherries-pull.md

diff --git a/.changeset/ninety-cherries-pull.md b/.changeset/ninety-cherries-pull.md
new file mode 100644
index 0000000000..7af75b7501
--- /dev/null
+++ b/.changeset/ninety-cherries-pull.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/fuselage': minor
+'@rocket.chat/styled': minor
+---
+
+feat: replace `useLayoutEffect` in favor of `useInsertionEffect`