Search code examples
performancereactjsmixins

React spending 100ms on mixins, even though my app doesn't have any

My React app has become incredibly laggy, and I'm trying to find (and destroy) the bottlenecks. The app updates every 10 seconds. And right now, that update is taking >100ms, which is too long.

When I went to record a timeline with the Chrome dev tools, I found that something called "Mixin.perform" was taking 107 ms. Screenshot attached.

This part confused me. Normally, I'd aim to fix whatever appears to be taking the longest. But my app doesn't have any mixins, that I know of at least. It's all written in ES6, so mixins aren't even possible.

I do use some third party components, so maybe it comes from one of those - is there any way I could tell which mixins are slowing things down? Or is there a different explanation?

Screenshot of chrome dev timeline

Solution

  • The Mixin object is part of the React source code: https://github.com/facebook/react/blob/master/src/shared/utils/Transaction.js#L77

    There is some description there as to what it's for. I understand it to mean it that is helping preserve state during reconciliation, the technique React uses to make rendering React applications performant enough for production use, and not just theoretically speaking.

    You can read about reconciliation here: https://facebook.github.io/react/docs/reconciliation.html

    It's likely that many of your components are receiving props changes, causing re-renders, which will bubble down to their children. At the end of this cycle, React will do its thing and will call Mixin functions to help with reconciliation.

    You can try to add some logging information in componentWillReceiveProps or shouldComponentUpdate to compare nextProps with this.props. There may be times when you want to return false in shouldComponentUpdate, which will reduce the amount of work React core has to do. You may also find components are receiving new props many more times then you expect.

    This article helps somewhat when trying to understand why components are updating when you think they should not be:

    https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html

    Good luck!