From ef7f87220959e1370fcdcaf02e7fb7eab2ed8a38 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 21 Nov 2024 09:39:33 -0600 Subject: [PATCH] fix(progress-steps): unnecessary re-renders --- .changeset/nervous-rabbits-love.md | 6 ++++++ internal-docs/engineering/gotchas.md | 7 +++++++ .../progress-steps/src/ProgressSteps.tsx | 14 +++++++++----- 3 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 .changeset/nervous-rabbits-love.md create mode 100644 internal-docs/engineering/gotchas.md diff --git a/.changeset/nervous-rabbits-love.md b/.changeset/nervous-rabbits-love.md new file mode 100644 index 0000000000..a8252a836e --- /dev/null +++ b/.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 diff --git a/internal-docs/engineering/gotchas.md b/internal-docs/engineering/gotchas.md new file mode 100644 index 0000000000..3fda417ae8 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx index c8e121984b..ece3d8ac5c 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx @@ -89,11 +89,15 @@ const ItemSeparatorStyles: { export const ProgressSteps = React.forwardRef( ({ 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 (