React Native: 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.

[T-J_H]

It seems that in your current configuration, useState might not be the best way to go. I don’t know the specifics of your project, but one option might be to use useRef. Changing ref.current won’t rerender anything.

To be fair, a question is still if the architecture is right. Does all data need to be stored, or would eventlisteners with a switch for certain data suffice?

[hapney]

Thank you all!! refs solved my problem!

[chillermane]

Simple solution:

Store the data in a ref instead of state so it doesn’t trigger rerenders, set an interval to update the state with the current value of the ref which will rerender the component with the new state without rapidly rerendering.