2

Let's say I have a very large, thrashing update that is incoming to a React.js app. Some action opens up a very large table detailing thousands of rows fetched from the server. With that, the following occurs:

  1. Dispatch to server - I want data
  2. Data for all of the rows are returned.
  3. Local datastore is updated with all data
  4. From an empty table with no rows, React injects thousands of new rows and columns into the table, causing (in many cases) a browser lockup.

Does anyone have any ideas as to how I might be able to mitigate this situation? Does React have any lazy or more performant painting strategies (i.e. paint when more idle: only render so much per tick)?

SirensOfTitan
  • 799
  • 1
  • 7
  • 19

1 Answers1

1

You can use a custom batching strategy in React, that might help:

https://stackoverflow.com/a/21395442/125680

However without a practical example it's hard to say. Maybe you're worrying about a situation that will never actually arise - after all React's virtual DOM updates along with judicious use of shouldComponentUpdate may make this a non-issue.

Community
  • 1
  • 1
Colin Ramsay
  • 16,086
  • 9
  • 52
  • 57
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Raedwald Dec 09 '14 at 20:34
  • 1
    Yes it does. A batching strategy could well be a viable solution to the problem, as could use of shouldComponentUpdate. – Colin Ramsay Dec 09 '14 at 22:24