I have a list of about 200 items that I want to render. Since its only 200 items (about 200 rows in a table, each consisting of a short text phrase), I thought it'd be speedy to do it client side. I use a backbone collection and bind a react table component to it. BUT somehow it takes at least a few seconds before the entire table loads.
You can try for yourself by running https://github.com/tastejs/todomvc/tree/gh-pages/examples/react-backbone (when you fill the table with 200 items, and then refresh the page, these 200 rows take a few seconds to render initially). I realized the render method of the ENTIRE table is getting called 200 items, and since each render of the table means that the row gets re-rendered too, we get an insane number of render calls. Why is it that for each additional row, the entire render method of the table gets called even though I pull those rows at the same time in backbone via collection.fetch()? How do I speed things up if I don't want to render server-side?
After more investigation, I realized as backbone fetches a collection, it populates a model at a time. Each time a model is populated, render is called, and this slows down the process. I solved it by only rendering the component when the entire collection has been successfully fetched.