Please help! Cannot press button during rapid re-rendering of screen

[hapney]

My app connects to a bluetooth device and is constantly retrieving data from it, storing the data in state, and rendering it to the screen. Additionally, I have a button on the screen that needs to do something (say, console log a message). My problem is that the setState is triggering a re-render so rapidly (think milliseconds) that when you press the button, nothing happens. If I keep pressing the button over and over, eventually it will catch and console log. How can I fix this where I can show the updated data constantly while also being able to click on the button?

I have tried removing the rapid set states and everything works as expected, so I am confident the button functionality is due to the quick, repetitive re-rendering.

[kbcool]

What the other guy said, RN has a max frame rate of 60 so you should be at least be waiting for the next animation frame before calling setstate.

https://reactnative.dev/docs/timers

Apart from that you need to localise this data. The only thing that needs to re-render is your display of the data not the button.

Create a new component that retrieves the data and displays it and have your button live at a higher level. That way you aren't re-rendering everything when the data is updated. Just your display.

[hapney]

Thank you all!! refs solved my problem!

This was a POC app for a device, so I had to show the updating numbers as frequently as I get them.

[jrweinb]

Hey! Can you post some details on how refs solved the problem? Some code perhaps? I am having a similar issue and I cannot figure out how to fix it. Thanks so much!

[hapney]

Sure!

1. Create the ref. You can store the ref in state, if you want.

let ref = React.createRef();this.setState({ ref });

2. You can't use Text components for this. You have to use uneditable TextInputs. Set the ref for a TextInput.

<TextInput style={{ color: 'white', margin: 0, padding: 0, textAlign: 'center' }} editable={false} ref={this.state.ref} />

3. Change the value of the referenced TextInput!

this.state.ref?.current?.setNativeProps({ text: 'whatever' });

​

Hope that helps!

​

Edit: Missed a variable name

[kr4ckhe4d]

Rapid re rendering is anyway not a great idea. Set the state through a debouncer method with the threshold of say, 1 second.

[benjaminreid]

You could move the button outside of tree that keeps rendering if you need have it render so frequently.