I've built in the past a "single page application" using nothing besides regular DOM manipulations with JQuery.
Nowadays, I'm rewriting the same app with React-Redux. After re-creating a certain page from my old JQuery app, I've noticed something disturbing: React does the same thing, MUCH MUCH slower. In fact, I'd say it's about twice as slow.
I started optimizing my component, and made sure it renders only when necessary. Yet, the entire process of re-rendering the HTML is slower.
What the component does: i fetch an array of 150 items from the server. Each item might have few items in it. So, my JSX has two nested map() functions:
{this.props.duplicates.length>0 &&(
this.props.duplicates.map((duplicate_group,index)=>{
return(
<form key={index}>
{
duplicate_group.map((book)=>{
return(
<div key={book.id}>
<label className="specific_product_for_merging" htmlFor={book.id} id={book.id}>
<input type="radio" defaultValue={book.id} id={book.id} name="name" />
<span className="duplicates_span">Title:<Link to={`/products/${book.id}`}> {book.name}</Link> </span>
<span className="duplicates_span">ID: {book.id}</span>
<span className=" duplicates_span">Author:<Link to={`/advancedsearch?advancedSearch=byTitle&author=${book.author}`}> {book.author} </Link></span>
<span className=" duplicates_span">Publisher:<Link to={`/advancedsearch?advancedSearch=byTitle&publisher=${book.publisher}`}> {book.publisher}</Link></span>
<span className="duplicates_span">Available Copies: 0</span>
</label>
<br />
</div>
)
})
}
<input type="submit" className="submit_merged_titles btn btn-primary btn-sm" defaultValue="Merge" />
</form>
)
})
)
}
I was doing the same exact thing with Jquery. For some reason, the direct DOM manipulation seems to work much faster, in this case at least.
Note that each time i fetch new data(i'm using pagination), all of the data is different, so React has to re-render all DOM elements. But how come the entire process, of re-rendering the virtual DOM, and then rendering the DOM itself, is practically twice as slow?
