angularjs - Performance issue with React

Question

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 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

Answer 1

React's performance is exaggerated. It's fast enough for most real use cases. Rendering large lists is its main weakness.

---

Also this always returns true (unless the update is triggered by setState). You need to shallow compare the props.

  shouldComponentUpdate: function(nextProps, nextState) {
    return this.props !== nextProps;
  }

And you should be using props in the places you're using context.