fix(progress-steps): unnecessary re-renders (#4170)

Author: krisantrobus

.changeset/nervous-rabbits-love.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/progress-steps": patch
+"@twilio-paste/core": patch
+---
+
+[ProgressSteps] fixed an issue where progress steps was rerendering unnecessarily

internal-docs/engineering/gotchas.md

@@ -0,0 +1,7 @@
+# Gotchas
+
+The purpose of this document is to keep a list of niche issues that have arisen over the lifetime of the product that we do not want to re-introduce. This can be related to our coded or third party libraries.
+
+## Emotion Library
+
+* If you pass a prop of the component into `styled.div` be sure to wrap it in useMemo as this librabry causes unnecessary re-renders otherwise.

packages/paste-core/components/progress-steps/src/ProgressSteps.tsx

@@ -89,11 +89,15 @@ const ItemSeparatorStyles: {
 
 export const ProgressSteps = React.forwardRef<HTMLDivElement, ProgressStepsProps>(
   ({ element = "PROGRESS_STEPS", orientation = "horizontal", ...props }, ref) => {
-    const ContainerStyled = styled.div(
-      css({
-        display: "flex",
-        ...ItemSeparatorStyles[orientation],
-      }),
+    const ContainerStyled = React.useMemo(
+      () =>
+        styled.div(
+          css({
+            display: "flex",
+            ...ItemSeparatorStyles[orientation],
+          }),
+        ),
+      [orientation],
     );
 
     return (