r-park
commented
8 years ago Hey @artemkolotilkin – I'm glad you found this repo useful.
This project isn't optimized for performance, especially for use-cases like yours. I would suggest you begin by looking at the following two areas for some quick wins:
1) Currently tasks are loaded and processed one at a time via the child_added callback, as you can see here. You can investigate using the value callback as shown here — this callback triggers when all items have been retrieved from firebase, which should be more efficient for large datasets. Definitely check out the official Firebase API docs for details.
2) Investigate React's shouldComponentUpdate() method:
Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update. If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change. In addition, componentWillUpdate and componentDidUpdate will not be called.
You can find details in the React docs here, and an example in the example branch of this repo. When used as shown in the example branch, editing a task item will only re-render that item, instead of re-rendering all the items in the list.
The example branch is pointing to a firebase backend containing 500 task items, so feel free to check it out.
artemkolotilkin
Hi Richard,
First of all thanks for a great example that you put together. It provides a solid base to start building apps with React/Redux/Firebase. Which I did...
In my use case I'm looking to have a few thousand of components on one page and wanted to check how React can handle all of them. So I wrote a script that generated 5000 records in Firebase and was waiting for this data to magically appear on /tasks page. When the script ran my page froze and became unresponsive for some time and then crashed. I couldn't load it after that, so I deleted those records and reduced test set to 500 items. Even with a smaller set first load of the page takes ~15-30 seconds. If after that I run a script to generate another 500 records, the page freezes for another 15-30 seconds.
First I thought that the component is "heavy" and so removed all the inputs and SVGs from it, leaving basically just a title text. But it didn't give any performance increase.
So I'm just wondering if it's an expected behavior and this stack can only handle a limited set of data? Or is it an issue somewhere?
I'm pretty new to React/Redux world so it's hard for me to investigate it myself.
Again, thanks a lot for the effort of putting it all together! I hope we can tackle this performance issue as well.