Home » Javascript » Does ReactJS have impressive performance when rendering huge matrix?

Does ReactJS have impressive performance when rendering huge matrix?

Posted by: admin October 29, 2017 Leave a comment

Questions:

I never used ReactJS, but I heard that it introduces fantastic feature called virtual DOM, reminds me a similar concept of virtual elements in Silverlight, invisible elements will be removed from tree to improve user perceived performance.
Here is my problem, I need to render a matrix could have 1000 x 1000 cells, they are all SVG, G elements created by d3js, performance is super bad on any browsers when it needs to hold 1 million DOM elements in memory and manage them, in my case, will ReactJS help? Are there any other frameworks can help my case? Thanks!

Answers:

React is very good at dividing your view into little components which you can compose together to create complex views. And React seems to be very good at it.

Removing invisible off-screen elements from the DOM (or Virtual DOM) is a valid approach to improve performance, however, React will not do that for you by default. Either you have to do it yourself or find a library which will do it for you.

React may or may not be able to display a million items for you depending on how complex is the SVG you want to render. Take a look at this library which can display a table with a million rows.

http://adazzle.github.io/react-data-grid/examples.html#/one-million-rows

But more importantly, I would request you to think twice if you really have the NEED to display a million items simultaneosly? Imagine what your client/user is supposed to do with or how to make sense out of a million items on screen. Beats me! Show her some kind of summary or a way to search through the million items to find the one or a few she needs.

Or are you having some kind of fancy data visualisation in mind? If you post your specific requirement, someone here might be able to help.

Hope I make sense.

Leave a Reply

Your email address will not be published. Required fields are marked *