React: Endless loop when using dynamically assigned methods in React component

[JensDebergh]

Plugin version

e.g. v24.6.0 (please try latest version)

Steps to reproduce

Initialize

<IntlTelInput
        onChangeNumber={(telephoneNumber) => this.onChangeNumber(index, telephoneNumber)}
        initialValue={initialValue}
        initOptions={{
          initialCountry: initialCountry,
          formatOnDisplay: true,
          formatAsYouType: true,
        }}
      />

When providing a dynamically assigned variable (for example when using this inside of a .map of items), it keeps triggering onChangeNumber in an endless loop and freezing the browser.

Expected behaviour

Should not trigger endlessly.

Actual behaviour

Triggers endlessly and freezing the browser as a result.

Initialisation options

I'm using utilsScript

[jackocnr]

Thanks for reporting this. I don't have time to look into this myself right now, but the react component is actually quite simple if you want to look into this yourself.

For reference, it might be useful to share a link to a codepen reproducing the issue - here's one with the react component up and running - you could fork this if it helps.

[roivasxxx]

Also had an issue, where my App would get into an infinite loop. In my case the IntlTelInput component is being used in a form (first its wrapped in a custom component). The form uses a state, that is an object. On each rerender the IntlTelInput would fire the onChangeNumber function, which would set my state and that would cause a rerender, which would cause the onChangeNumber function to fire,.. etc. etc. Obviously just using a state with a simple string, number, etc. doesnt cause this infinite rerendering.

To resolve the issue I just wrapped my custom component in a memo and called it a day.

[jackocnr]

Thanks. This is a good point: if the react component is firing onChangeNumber on each render, then that is a bug which we should fix. Again, I don't have time myself right now to look into this, but I would welcome a pull request.