Side effects inside ProgressTabs and related components

[odomyshev]

Description

When I have any side effects in the parent components, any contents of ProgressTabs gets forcefully unrendered and rerendered back.
Because of that it's impossible to have any side effects inside contentful progress steps

Link to Reproduction

console.twilio.com

Steps to reproduce

I synced with @krisantrobus (I think the issue is not easy to reproduce outside of Console)

Paste Core Version

20.16.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[krisantrobus]

For internal team reference I have validated the issue. We spent over an hour debugging together. The cause here is from the emotion library. For progress steps we use the styled.div constructor and this is getting rerendered whenever there is a side effect. Very strage but also found a lot of refernces with rerender issue for this library.

[krisantrobus]

Hi @odomyshev I have a fix for this up in this PR. This will be included in our next release but this won't be for another 3-4 weeks and will take time for the web platform team to upgrade. If you need this sooner my recommendation would be to swap the root ProgresSteps component with this file in your code and swap back in with our PAste component after the release.

The issue was with a third party library. We found that when we pass in props from the parent component. into the CSS generation logic it would always re-render with side effects even though the props are unchanged. We fixed by using useMemo. I have tested this in your branch and is working as expected.

One other note, when our team were reviewing the working branch to debug we had some feedback for you designer. We do not recommend using multiple progress steppers (one in the top bar and a vertical in the page). We had a previous discussion around this and a recording for our office hours can be found here. Let them know they can start a discussion with us through GitHub or block some time with us during an office hours.