Multiple instances of Alan is opening while running

[Roshan-Thomas]

I am building a news application, where alan gives the latest news using the newsapi.

While I am running the application, after it retrives and displays the news, it immeditely opens multiple instances of itself. So when I say read the news, all the instances start reading the news.

• I used React to build the application
• Version of alan-sdk-web: 1.3.0

Check out the app here: https://amazing-aryabhata-2fd271.netlify.app/
My repo for the project: https://github.com/Roshan-Thomas/VoiceControlledNewsReaderApp

I initially thought it was an error because I was running it locally, but the same thing happened even when I launched it on netlify.

[annmirosh]

Hi, @Roshan-Thomas,

as I can see from your repo, you have already fixed the issue.
Anyway, for people who might have the same issue in the future, here is a code that shows how the Alan Button should be added to the React functional component:

  useEffect(() => {
    alanBtn({
      key: 'alan-project-key',
      onCommand: ({ command, articles, number }) => {
       // Call the client code that will react to the received command
      }
    });
  }, []);

You need to pass an empty array as a second argument to the useEffect hook.
This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. In this case, useEffect hook behaves closer to the componentDidMount method, as a result, only one instance of the Alan Button is created.

[Roshan-Thomas]

Thanks