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';