onExit is automatically firing

[irtaza9]

Describe the bug

I'm using intro.js wrapper for React js in functional components. I'm was debug the component and every time my component renders the onExit callback automatically fired by the library.

To Reproduce

This should be like onChange event or onComplete event, when someone interact with the exit/skip button the event should be call at that time.

Expected behavior

I think this should be resolved in next PR

How often does this bug happen?

Every time

System Info

OS: Windows (10)
Browser: Chrome
Version 108.0.5359.125 (Official Build) (64-bit)

Additional Context

I created a codesandbox with the behavior of library, you can check the code and add your valuable thoughts in it.

[HiDeoo]

To understand the issue, you can add a log to your useMount hook:

useMount(() => {
    console.log("> useMount");

    setdata({ ...data, run: true });
});

The console would log > useMount two times.

This behavior is due to your usage of <StrictMode> in your index.js file that enables the following check:

• Your components will re-render an extra time to find bugs caused by impure rendering.

To test this, you can remove the <StrictMode> wrapping your application in index.js to see the console logs only 1 time > useMount and 0 times the log in the onExit event handler.

Note that all of these checks are development-only and do not impact the production build.

[irtaza9]

Dear @HiDeoo, As we know that React. StrictMode is a tool that highlights potential issues in a programme that may occurs in future or by any other chance. Is there any other way that is more proficient and stable? I've to call API's to store the record on db level.

[irtaza9]

@HiDeoo , can you please elaborate why onExit is triggered when onComplete callback is called + vice versa?

Codesandbox: Link

[HiDeoo]

Dear @HiDeoo, As we know that React. StrictMode is a tool that highlights potential issues in a programme that may occurs in future or by any other chance. Is there any other way that is more proficient and stable? I've to call API's to store the record on db level.

Your API call will only be fired twice in development mode so that may not even be an issue. If your call is affecting the state, you can check the new documentation regarding handling effects firing twice in development which describe a way to avoid having the second call in development affecting the state a second time.

@HiDeoo , can you please elaborate why onExit is triggered when onComplete callback is called + vice versa?

This is the default behavior of intro.js and intro.js-react is not doing anything fancy regarding these callbacks. You can check my comment here to get more details and a workaround provided by intro.js-react to figure out if the tour is complete or not when using only this callback.

[irtaza9]

@HiDeoo, First of all thank you for your fast and effective response, I'm facing another issue with the library regarding import attaching the warring that is triggered in the console.

import "intro.js/introjs.css";

node_module

package.json

    "intro.js": "^6.0.0",
    "intro.js-react": "^0.7.1",

[HiDeoo]

Looks like the issue is related to intro.js from the error message that some other people are still encountering.

[irtaza9]

do we need to install intro.js in react.js project for intro.js-react or intro.js-react is an independent from intro.js? like do we need to install intro.js or not?

did

I uninstalled the intro.js from my project to verify the above question and I got the below error in my console.

ERROR in ./node_modules/intro.js-react/lib/components/Hints/index.js 7:36-55
Module not found: Error: Can't resolve 'intro.js' in 'D:\Nayatel\Signage\digital-signage\node_modules\intro.js-react\lib\components\Hints'

ERROR in ./node_modules/intro.js-react/lib/components/Steps/index.js 7:36-55
Module not found: Error: Can't resolve 'intro.js' in 'D:\Nayatel\Signage\digital-signage\node_modules\intro.js-react\lib\components\Steps'

webpack compiled with 2 errors and 1 warning

Thinking

May be intro.js-react is working on the head of intro.js that's why It throws this error.

[HiDeoo]

do we need to install intro.js in react.js project for intro.js-react or intro.js-react is an independent from intro.js? like do we need to install intro.js or not?

This is specified in the installation instructions:

Make sure to have React & Intro.js installed (they're peer dependencies) and the Intro.js CSS definitions properly loaded into your project.

[irtaza9]

@HiDeoo, Thank you for your time and knowledge. I got my all queries resolved.