Skip to main content
Answered

My typeform keeps reloading whenever I scroll anywhere in mobile


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-tf

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.

View original

17 replies

michealadedirann
Forum|alt.badge.img

Hello Yasir, 

Sorry about your issue I know how frustrated you are. I’ll leave a few solutions which might solve your issue:

  1. Try reducing the size of your images and videos to see if this resolves the issue.
  2.  Try reducing the number of questions to see if this resolves the issue.
  3. Try testing your Typeform on different mobile devices to see if the issue persists.
  4. If there are JavaScript errors on your Typeform, it can cause the form to re-render when you scroll on a mobile device. Check the console for any JavaScript errors and fix them. - If you can't code/debug just ignore this one. 

If all of these this does not help are two solutions left

  1. Contact Typeform Support for assistance. They can help diagnose the issue and provide a solution.
  2. Create a new Typeform ( with 2 questions) to see if it’s a general issue. If not try making a new copy of the former quiz - for each question published refresh to make sure you spot the issue.

Hope it helps.


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • March 20, 2023

Hi @yasir ghouri If you’d like to share the URL where your form is located with us, we’re also happy to take a look!


  • Author
  • Explorer
  • 3 replies
  • March 23, 2023

Hi @Liz ,

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.


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • March 23, 2023

Thanks! 

@mathio might be able to help you out with this one!


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • March 23, 2023

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.


  • Author
  • Explorer
  • 3 replies
  • March 24, 2023
mathio wrote:

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 @Liz @mathio 🤗


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • March 24, 2023

Glad to hear it, @yasir ghouri ! Let us know if we can help with anything else. 😀


  • Navigating the Land
  • 4 replies
  • May 25, 2023

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

 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • May 25, 2023

Hi @Deshna Can you send the URL where you have the form embedded? Thanks!


  • Navigating the Land
  • 4 replies
  • May 25, 2023

Hi Liz,

the site is still in development. There are 6 forms embedded like this:

https://staging.addupp.nl/rapid-reviews/risico-management/
 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • May 26, 2023

Thank you, @Deshna ! @mathio do you happen to have any idea why this might keep rendering on mobile? I’m seeing it happen on an iPhone. 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • May 30, 2023

I am sorry but in this case I can not help unless I see the source code. 

@Deshna did you wrap all of your callback functions in useCallback? In React apps a component is re-rendered every time a prop changs. If you change any props for your typeform (eg. hidden field) the typeform will reload as that is how iframes work.


  • Navigating the Land
  • 4 replies
  • May 30, 2023

Hi Mathio,

Thank you for your reply. I appreciate that.
I did not wrap callback functions, because I do not know how to do this.
Can you elaborate on that or share code how to implement this fix?
I simply embedded Typeform code in a Divi code module.


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • May 30, 2023

From what you are saying it looks like you are not embedding as React component. However this thread is about using React components. The issue in this thread not solution do not apply to your case.

I tried debugging your page in Safari on iPhone - on each scroll I can see new errors displayed in browser console: 

 

It looks like there is some recurring issue that happens on page scroll. It might also be affecting your embedded typeform. I am sorry but I can not help you any further.


  • Navigating the Land
  • 4 replies
  • May 30, 2023

Thank you for explaining this. That is a lot of errors!

I was not aware I was in a React thread but now I know. I will turn to the Typeform support instead.

Thanks again for taking the time. Have a nice day!


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • May 30, 2023

@Deshna feel free to ask Typeform support for help. However it looks like those errors are coming from other scripts than your embedded typeform. I dont think support will be able to help with this.


Reply