diff --git a/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx b/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
index 96ac4cef77ec1..4f3d06eac53d5 100644
--- a/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
@@ -155,18 +155,30 @@ interface GuidedOnboardingTourStep extends SecurityTourStep {
// wraps tour anchor component
// and gives the tour step itself a place to mount once it is active
// mounts the tour step with a delay to ensure the anchor will render first
-export const GuidedOnboardingTourStep = ({
- children,
- // can be false if the anchor is an iterative element
- // do not use this as an "is tour active" check, the SecurityTourStep checks that anyway
- isTourAnchor = true,
- ...props
-}: GuidedOnboardingTourStep) => {
+export const GuidedOnboardingTourStep = React.memo(
+ ({
+ children,
+ // can be false if the anchor is an iterative element
+ // do not use this as an "is tour active" check, the SecurityTourStep checks that anyway
+ isTourAnchor = true,
+ ...props
+ }: GuidedOnboardingTourStep) => {
+ return isTourAnchor ? (
+ {children}
+ ) : (
+ <>{children}>
+ );
+ }
+);
+GuidedOnboardingTourStep.displayName = 'GuidedOnboardingTourStep';
+
+const SecurityTourStepAnchor = React.memo(({ children, ...props }: SecurityTourStep) => {
const { hidden: allStepsHidden } = useTourContext();
const hiddenByFlyout = useHiddenByFlyout({ tourId: props.tourId, step: props.step });
- return isTourAnchor && !allStepsHidden && !hiddenByFlyout ? (
+ return !allStepsHidden && !hiddenByFlyout ? (
{children}
) : (
<>{children}>
);
-};
+});
+SecurityTourStepAnchor.displayName = 'SecurityTourStepAnchor';