First tip fires twice

[vincehartman38]

Describe the bug

When the tool tip appears in our application, the first one appears twice in a row to the user even though we have it only listed once in the steps. We have the initialStep set to 0.

We use React JS. Here is our code:

<Tutorial steps={stepsLanding} tutorialName="landing" />

export default function Tutorial(props: TutorialProps) {
	const dispatch = useDispatch();
	const { response: amplifyResponse } = useAppSelector(selectAmplify);
	const { response: tutorialResponse } = useAppSelector(selectTutorial);
	// lucky number 7
	return (
		<Steps
			key={props.tutorialName}
			enabled={tutorialResponse[props.tutorialName] !== undefined && !tutorialResponse[props.tutorialName]}
			steps={props.steps}
			initialStep={0}
			onExit={() => {
				if (!!amplifyResponse.userToken) {
					finishTutorial(amplifyResponse.userToken, props.tutorialName);
					const tutorialResponseCopy = JSON.parse(JSON.stringify(tutorialResponse));
					tutorialResponseCopy[props.tutorialName] = true;
					dispatch(updateTutorial({ response: tutorialResponseCopy }));
				}
			}}
			options={{ showBullets: false, disableInteraction: true }}
		/>
	);
}

import { Step } from "intro.js-react";

const stepsLanding: Array<Step> = [
	{
		element: ".landing",
		title: "Welcome",
		intro: "Welcome! The following tutorial will teach you how to navigate the application.",
	},
	{
		element: ".navButtonLanding",
		title: "Navigation Drawer",
		position: "right",
		intro: "This is the navigation drawer. You can use it to navigate between different pages of the app.",
	},
	{
		element: ".navButtonSearch",
		title: "Patient Search",
		intro: "This button will navigate you to our nationwide patient search page.",
		position: "right",
	},
	{
		element: ".navButtonPDFUpload",
		title: "Upload PDF",
		intro: "This button will navigate you to the PDF upload page, where you can upload a PDF for summarization.",
		position: "right",
	},
	{
		element: ".navButtonDashboardStandard",
		title: "Summary Dashboard",
		intro:
			"This button will navigate you to the summary dashboard page, where you can view the most recently selected patient summary.",
		position: "right",
	},
	{
		element: ".navButtonLogIn",
		title: "Log Out",
		intro: "You can click here to log out.",
		position: "right",
	},
];

export default stepsLanding;

To Reproduce

Implement intro.js-react as described above.

Expected behavior

Each step should only appear once and not duplicate.

How often does this bug happen?

Every time

System Info

"intro.js": "^7.2.0",
"intro.js-react": "^1.0.0",

Additional Context

No response

[HiDeoo]

What you're observing should be due to the usage of React's <StrictMode> like in this issue. When enabled, your components will re-render an extra time to find bugs caused by impure rendering:

React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs (props, state, and context).

If a function is pure, running it twice does not change its behavior because a pure function produces the same result every time.

This is what happens here as the steps will be re-rendered twice identically, as expected, causing the issue you're seeing.

Note that all of these checks are development-only and do not impact the production build. It's also possible to enable this mode only for part of your application, as shown in the docs, which could omit the steps component.