onExit is automatically firing

Question

onExit is automatically firing

irtaza9 opened this issue 2 years ago · comments

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 · Answer 1 · Mon Jan 02 2023 16:27:45 GMT+0800 (China Standard Time)

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.

Irtaza Hussain · Answer 2 · Mon Jan 02 2023 18:58:14 GMT+0800 (China Standard Time)

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.

Irtaza Hussain · Answer 3 · Mon Jan 02 2023 19:03:03 GMT+0800 (China Standard Time)

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

Codesandbox: Link

HiDeoo · Answer 4 · Mon Jan 02 2023 19:14:30 GMT+0800 (China Standard Time)

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.

Irtaza Hussain · Answer 5 · Mon Jan 02 2023 19:31:52 GMT+0800 (China Standard Time)

@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 · Answer 6 · Mon Jan 02 2023 21:49:32 GMT+0800 (China Standard Time)

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

Irtaza Hussain · Answer 7 · Mon Jan 02 2023 22:59:27 GMT+0800 (China Standard Time)

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 · Answer 8 · Tue Jan 03 2023 01:15:42 GMT+0800 (China Standard Time)

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.

Irtaza Hussain · Answer 9 · Tue Jan 03 2023 12:30:32 GMT+0800 (China Standard Time)

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