How to overwrite renders in javascript from LWC?

Question

I am working with the paypal sdk and I have had several problems, since the paypal smart button works with the light dom and the lwc works with the shadow dom. I think it is not possible to fully implement the button to lwc. The detail now is that in a form I am filling in the necessary fields for the paypal button to work. The problem is that I am working with the "renderedCallback ()" and when I write in my form the button is duplicated depending on how many fields it has or changes it makes. How could I get only the last render?

The code: renderedCallback() {

    //codigo nuevo del boton de paypal

    

    
    const te = this.template.querySelector('.paypalbutton');
    te.innerHTML = `
    
    <style>
    
        .paypal-button{

            text-align:center !important;
            margin-top: -78px !important;
            margin-bottom: 20px !important;
        }
    
    
    </style>
  
    <div class="paypal-button" ></div>`;

      
    

    Promise.all([
        loadScript(this, checkout)  //checkout means the static resource

    ])
        .then(() => {
            this.paypal();
          
         
        })
        .catch(error => {
            alert('NO LOAD THE SCRIPT');
            alert(error.body.message);
        });

      }

Answer 1

I briefly looked through the PayPal docs and see no reason why you need to re-render the button every time.

I would suggest using the first render. That is easily achievable by utilizing a boolean variable that indicates if it's the first load.

export default class MyCmp extends LightningComponent {
    isFirstRender = true;

    renderedCallback {
        if (this.isFirstRender) {
            this.isFirstRender = false
            // other logic here
        } 
    }

}

Update:

OK,, my bad, I found the reason why you want to use re-render. Take a look at this question. This looks like something that will solve your problem in combination with a first render technique.