Failed to render <PayPalButtons /> component. Error: Window closed about react-paypal-js HOT 10 CLOSED

Yep! I'll do it today!

from react-paypal-js.

Maybe one option to make it not reload this much would be to denounce the function that changes the onApprove or the createOrder, but then I think it should be documented.

from react-paypal-js.

Hi @pedroapfilho,

As I have to fetch data to render the PayPalButton, it re-renders a couple times, and this error appears on the log:

I recommend waiting to render the <PayPalButton /> component until you have all the data you need. Ex:

return (
  {  isDataLoaded && <PayPalButton /> }
)

Those re-rendering errors shouldn't break the Buttons but it's best practice to be defensive around the re-render strategy.

And is there a way to make it not re-render every time I change something on the createOrder or the onApprove function?

Yep this was totally a bug that recently got fixed and is part of the v3 release. In v3, state changes related to the callbacks won't trigger a re-render and we have the new forceReRender prop to control when you want to re-render. Details in #56

from react-paypal-js.

Hey @gregjopa I saw it! It seems that it still rerenders for me, but I think it's because I call useContext inside of the component that renders it, and sometimes the context state changes and the button rerenders too. It's weird because that's the only thing that re-renders in the whole app. (It'
s a checkout page)

from react-paypal-js.

@pedroapfilho thanks for sharing your use case. Can you try using memo to see if it prevents the re-renders?

Here's a Draft PR that adds it to the buttons component: #61

You may also be able to do it in user-land like so:

import React, { memo } from 'react';
import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';

const MemoizedPayPalButtons = memo(PayPalButtons);
// and then render the <MemoizedPayPalButtons /> in your jsx

from react-paypal-js.

@pedroapfilho could you please provide a code snippet or an example project to show the problem you are running into with wrapping the Button in a component that's using useContext? I'm been struggling to reproduce the issue.

from react-paypal-js.

For sure! I'll do it today!

from react-paypal-js.

I just discovered, creating the example, what exactly is the problem...

It seems that the style prop is not memoized, so it re-renders and makes it get messy.

https://codesandbox.io/s/adoring-architecture-ikx44?file=/src/index.js

You can check it here:

1- Type something, you'll see it rerendering
2- Remove the style from the PayPalButtons component
3- Type again on the input, you'll see that it doesn't happen again.
4- Put the created style constant to the prop style, like style={style} on the PayPalButtons component
5- Type again, you'll see that it doesn't re-render.

I think we just need to memoize it, just like we do with the onChange, onApprove and etc.

from react-paypal-js.

Here:

You've added it to the useEffect dependencies.

from react-paypal-js.

@pedroapfilho nice catch! It sounds like watching an object like props.style in the useEffect hook is problematic since it's not a primitive value. So the solution is to remove props.style from that list, correct? Would you be up for submitting a PR to remove it?

from react-paypal-js.