Wallet re-renders with delay if prop changes, causing flicker

[mdwt]

I'm using the Wallet component with the onSubmit callback to set up the transaction when the button is clicked.

When using the Wallet component together with a form - I'm using Formik to validate and submit the form - the button flickers every time any form value changes. This is because the onSubmit function updates every time the form changes, as it's used to submit the form values to our backend and also to create the Preference .

Here's a quick video of what's happening https://tella.video/wallet-re-rendering-on-form-update-fzer

I see in Wallet.ts source that there is an initialization delay of 200ms if any of the props updates, and I'm assuming this is what causes the flicker everytime a form value changes.

I'm wondering if there is any way to get around this or to disable the init delay?

[meliguicarvalho]

Hello! Good afternoon.

The re-renders are caused by the React lifecycle and the usage of Formik. Everytime a prop changes, all the components are re-rendered, and since the Brick is a remote component, it appears to flicker on the screen.

This can be fixed by changing the way you implement the component, by using it outside the context of the form you can avoid the issue.
We created an example that simulates your issue and fixes it using React's useRef.
Please check it out here, we think it will help you: https://codesandbox.io/s/formik-walletbrick-55wn0q?file=/src/App.js:337-380

[mdwt]

Great, thanks for the explanation and the example, it helped a lot. Using the ref solves my problem.

[acyment]

Hi! Demo is no longer accessible. Could be so kind as to make it available once again?

Thanks in advance

[lemazzo]

Hi @acyment !

Don't know if it is a problem from codesandbox, but this code really is not available anymore.
Basically, we had a form using React memo or useRef to skip form rerender.
I suggest that you put your code at codesandbox and send us. This way we can understand your problem and help you.

Thanks!

[acyment]

Hi! I am not sure how to create a codesandbox that has both front and backend. It's hard to reproduce the problem without both, as I need the backend to create the preference id.

[lemazzo]

Hi, @acyment !

Probably your problem is related to React state management. Using React useRef or memo to skip form rerender can resolve. This articles can help you too:

• https://medium.com/@rickmint/3-1-react-common-mistakes-that-triggers-unnecessary-re-renders-72d1e993d7bf
• https://dev.to/femi_akinyemi/how-to-prevent-unnecessary-react-component-re-rendering-3c08

If your problem persists, try to send us your code simulating this rerender focus on front-end code and maybe mocking back-end.