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.

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.,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.,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.,js,output

Update 3:

My mistake again. I did it wrong which mtions.,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.,css,js



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' });