Ad

Performance Issue With React

- 1 answer

I read about React being very fast. Recently, I wrote an app to test react against angular. Unfortunately I found react performing slower than angular. http://shojib.github.io/ngJS/#/speedtest/react/1

Here is the source code for react. I'm very new to react. I am sure I'm doing something wrong with my react code here. I find it unusually slow. https://jsbin.com/viviva/edit?js,output

See if any react experts can find the bottlenecks.


Update 1:

  1. Removed the usage of context.
  2. Better usage of setState.
  3. Better usage of shouldComponentUpdate.

I still can't make it faster than angular or even close to it. https://jsbin.com/viviva/96/edit?js,output


Update 2:

I made a big mistake by creating 2d arrays in the cell component. So I moved them to a mixin. Now I believe that react is faster than angular in DOM manipulations. https://jsbin.com/nacebog/edit?html,js,output


Update 3:

My mistake again. I did it wrong which mtions. https://jsbin.com/nacebog/edit?html,js,output


Update 3:

My mistake again. I did it wrong which made it faster. After analysis, it was rendering incorrectly. If anyone can help me understand, if this could be any faster. I know react is not good at dealing large arrays. In this scenario, it's dealing with four 3d arrays. https://jsbin.com/viviva/100/edit?html,css,js

Ad

Answer

This is a very contrived example in my opinion.

  • As stated above, you are using context incorrectly.
  • There is no need for a mixin: the number of columns and rows can and should be passed down as props. create2DArray, getRandomNumber should be declared at the top of your script as simple global functions.
  • You are setting the state incorrectly. You should never change the state like this this.state.some = 'whatever', you have to use setState

    this.setState({ some: 'whatever' });

Ad
source: stackoverflow.com
Ad