React Widget onQuestionChanged causes form to keep reloading

[teamclouday]

Hi, I'm working on a react embed Widget component and trying to change an react state whenever question has changed. However it causes the form to keep reloading so it always displays the first question.

Here's an example to reproduce the error:

const [animateValue, setAnimateValue] = React.useState<number>(0);

// ... other code

<Widget
          id={typeformID}
          width="100%"
          height="100%"
          className="z-20 min-h-full min-w-full"
          opacity={0}
          inlineOnMobile
          onQuestionChanged={() => {
            console.log("Question changed");
            setAnimateValue((prev) => (prev + 1) % 3);
          }}
/>

Not sure if this is a bug or there's a better way to do this. I'm using 4.1.0 version of @typeform/embed-react

[teamclouday]

I read the troubleshooting page and it turns out I had to wrap both onSubmit and onQuestionChanged in React.useCallback functions and the form will stop reloading.