Best practice for frequently-updating UI elements?

(Peter) #1

I’m planning the structure of a site I’ll be making and I was wondering how best to handle frequently-updating items. I have a bunch of items in a Firebase database, which will all be linked into my Redux state with react-redux-firebase. Let’s say I have a simple div showing how many times someone’s clicked on it. Every time someone clicks on the div, it updates a counter in the database, which updates the counter in the Redux state, which updates the number shown in the div.

Now, what if there’s 1000 different people all clicking on the div, every second? Do I need to do anything special to handle this sort of scenario (like having a server listen to the Redux state instead and send updates to the div only every 5 seconds or so)? Or is React designed to take this sort of thing into account? I don’t want a client’s browser to start chugging and consuming CPU since it’s trying to update a div 1000 times a second.

(Troy Rhinehart) #2

React is pretty fast, and the lastest version (16+) helps eliminate these concerns with Fiber but in a scenario when you know the component could end up updating several times a second it might be worth introducing a throttle or a debounce before dispatching. Also, if you’re doing heavy CPU related tasks consider using a WebWorker to offload computation into another thread.