Payment Brick unmounting on any position displacement

[AndAccioly]

Good night, please I need some help. I am doing a web store and I am using mercadopago/sdk-react v0.0.19 for payment. But, whenever I resize the page or roll down the page the Payment Brick component renderizes again (it vanishes and then mount it again).

It is worse on mobile because when I click on card field to write my card number and the keyboard goes up, the displacement of the Payment component just make it unmount and mount again.

The brick component is just as it is below.

I hope anyone can help me!

[AleFossati]

Hello @AndAccioly.

I have tried a new implementation of the Payment brick and it seems to me that it is working fine even resizing the page multiple times.
Here's the link of the public implementation, so you can check it out.

The re-renders is a super common issue when using react, but it is mostly related to the state management of your application.
Maybe it's something related to some useState that you have in your component, or even a parent component.
Here's some guides that we recommend the reading to understand it better.

React.dev - Memo
Medium - React Components rendered twice
Medium - Wait, you’re not using <React.StrictMode>?!

If you have any other question, let me know.

[AndAccioly]

Thank you so much taking some of you time to answer me, and you were absolutely right. For what you said and the example code, I could test some stuff and find there is a hook that I made to check width and height to check screen size so I can choose to render between mobile and desktop different views, and that was causing the re-rendering.

Thank you so much again! You saved my week xD