My typeform keeps rerendering whenever I scroll anywhere in mobile device. I checked it on multiple browsers but it isn’t a browser issue either
Best answer by mathio
View originalMy typeform keeps rerendering whenever I scroll anywhere in mobile device. I checked it on multiple browsers but it isn’t a browser issue either
Best answer by mathio
View originalHello Yasir,
Sorry about your issue I know how frustrated you are. I’ll leave a few solutions which might solve your issue:
If all of these this does not help are two solutions left
Hope it helps.
Hi
Hi
Problem I am facing is that whenever my users open my type form on my website it starts re-rendering. This issue is faced mostly on mobile devices but it also happened on desktop a few times while testing. I integrated type form on my website 1 and half year ago and back then it worked well and even 6 months before we published a feedback and type form was working fine. Suddenly from last 2-3 months type form has started acting weird with the re-rendering issue.
I am using type form version
"@typeform/embed-react": "^1.12.0",
Initially I thought maybe if I upgrade my type form library version the issue will resolve but even with the latest type form version I was getting the same issue. So far what I have found through my debugging is that if I pass onSubmit function to type form then this issue is happening. If I remove the onSubmit function then type form works fine but I need this onSubmit function to perform certain database changes.
<Widget hidden={hiddenFields} onSubmit={onSubmit} id={formId} className="feedback-form" />
Here is the link of my website where you can take a look at the issue (make sure to open this website from mobile device). : My Website
I need to publish another survey to my users after a month that’s why it is very important that I get this problem fixed otherwise I’ll have to look for type form alternatives and implement them which is not I want.
You might be supplying a function to onSubmit
that changes between renders. In React if props change the component is re-rendered. Unfortunately for typeform this means the iframe is reloaded as well.
Wrapping the onSubmit
function in useCallback
solves the issue in most cases.
You might be supplying a function to onSubmit
that changes between renders. In React if props change the component is re-rendered. Unfortunately for typeform this means the iframe is reloaded as well.
Wrapping the onSubmit
function in useCallback
solves the issue in most cases.
It worked!!!🎉
Thanks alot
Hi!
I am experiencing the same issue, my typeform keeps rerendering whenever I scroll anywhere in mobile device.
The solution Wrapping the onSubmit
function in useCallback
sounds good. But I have no idea how to do this. Is there a reference for this? Or could you share the code you implemented?
Thanks a lot.
const handleSubmit = useCallback(() => {
// Your function which you wan to call on submit
}, []);
and then pass this function in the prop of onSubmit
Hi Liz,
the site is still in development. There are 6 forms embedded like this:
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.