Excessive DOM Depth and Performance Concerns with react-phone-input-2 div.arrow

[shrey7070]

Overview:

I currently use the react-phone-input-2 library in my React application to input phone numbers. While the library provides valuable functionality, I have observed some performance concerns related to excessive DOM depth within the component structure.

Issue Details:

The main issue I'm encountering is that the library generates a div.arrow element within its internal structure, which contributes to a high DOM depth. This has resulted in performance issues and slower page rendering.

Steps to Reproduce:

Include the react-phone-input-2 component in a React application.
Inspect the generated DOM structure, explicitly looking for the div.arrow element.
Expected Behavior:
The library should have a more optimized DOM structure with reduced nesting for improved performance.

Actual Behavior:

The generated div.arrow element contributes to excessive DOM nesting, affecting the page's performance negatively.

Additional Information:

React-phone-input-2 version: 2.15.1
Browser: Chrome
Operating System: macOS

Screenshot:

Possible Solutions:

Investigate if there are any library-specific props or customization options to optimize the DOM structure.
Seek guidance from the library maintainers on potential performance improvements.
Consider alternatives or custom implementations if the issue persists.
Please let me know if you need further information or if there are specific actions I should take to address this concern.

Thank you for your attention to this matter.