Join GitHub today
Use production mode for React that strips out all the warnings #3
This benchmark is using the dev mode of React which enables a lot of developer warnings and is not meant to be used in production because it is way slower. This pull request enables production mode and the perf is totally different.
I bumped the number of games to 500 in both React and Vue and this is what the traces look like:
Just want to chime in here - I was running the two versions locally and it seems the React version is doing way fewer actual updates than the Vue version, because the update delay is different:
(links above are from the commit before merging the PR that fixed this)
Basically the Vue version is doing 10 times the work than the React version?... ouch
referenced this pull request
May 24, 2016
I'm not sure whether this is relevant for the benchmark but the current "best practice" in React seems to be to also use these two babel transforms when running in production for additional performance optimization:
EDIT: also allegedly pure functional components are faster than class components, I think? Not sure what relative impact this has.
added a commit
this pull request
May 24, 2016
@pocketjoso use functional components sure, but decorate them with HOC that give you a shouldComponentUpdate shallow diff and get best of both worlds.
import pure from 'recompose/pure'; const MyFunctionalComponent => props => <h1>props.message</h1>; export default pure(MyFunctionalComponent);
Thanks for all the great feedback - we've posted some updated results here: https://engineering.footballradar.com/a-fairer-vue-of-react-comparing-react-to-vue-for-dynamic-tabular-data-part-2/
After all of the comparison is done, would you consider to switch to Vue from React, or at least implement the new projects with Vue?
I am asking, because Vue does seem to be better for the particular case where a tabular data is changing frequently. This case suggests to use Rx with React, since we want to handle the data reactively.
For other cases, where we do not have observable data, the performance difference would not apparently be so noticeable. Developers, as all humans, have preferences which means if one likes React's semantic more than Vue's, would it be reasonable for him to stick to React despite the fact that Vue outperforms React in particular cases.
Also, React community is bigger so we have more React based libraries for common tasks and nice integration with webpack and redux for example (not sure if they are easily integrated with Vue as well).
Would be nice to see how simulacra performs in the same context.
Thank you for the great post btw!