Conversation
…nuous rerendering
siggy
left a comment
siggy
left a comment
There was a problem hiding this comment.
looks good!
not sure if related to this branch, but a moment after i hit Stop, i get a Websocket [1006] error:
| super(props); | ||
| this.tapResultsById = {}; | ||
| this.topEventIndex = {}; | ||
| this.debouncedWebsocketRecvHandler = _.throttle(this.updateTapEventIndexState, 500); |
There was a problem hiding this comment.
TIL _.debounce (and _.throttle)!
what do you think about setting leading: true, to make the initial event pop up immediately after the user hits Start?
_.throttle(this.updateTapEventIndexState, 500, {
'leading': true,
'trailing': false
});There was a problem hiding this comment.
On throttle, I believe the default value for leading is true. I think the inital delay is the delay in establishing the websocket connection and sending the query.
dadjeibaah
left a comment
dadjeibaah
left a comment
There was a problem hiding this comment.
Pretty cool fix! The changes are pretty significant. 📦
klingerf
left a comment
klingerf
left a comment
There was a problem hiding this comment.
⭐️ This is awesome! Am going to take the same approach with the tap table.
4 participants
Problem
We receive a lot of websocket events from the tap server. Previously, we were processing each event as we received it, then calling setState after processing to update the tables. Each call to setState triggered a re-render of the whole table. We were rerendering multiplie times a second, causing the whole page to become unresponsive.
Solution
throttlesetState for receiving websocket tap events to prevent continuous rerendering.Store the tap events in an index outside of state, and only update the state once every specified interval (currently 500ms).
We can now view entire namespaces with Top and the page won't crash!
To verify: Go to
/topand try topping a namespaceFor more reading:
https://css-tricks.com/debouncing-throttling-explained-examples/
https://nolanlawson.com/2018/09/01/a-tour-of-javascript-timers-on-the-web/
Part of #1601