 {div, h2, h3, ul, li, a, p, pre, span} = React.DOM
 el = React.createElement
 
-class ProfilePage.TopRanks extends React.Component
-  constructor: (props) ->
-    @state =
-      limitBest: 5
-      limitFirst: 5
+ProfilePage.TopRanks = React.createClass
+  mixins: [React.addons.PureRenderMixin]
 
-    super props
+  getInitialState: ->
+    limitBest: 5
+    limitFirst: 5
 
 
-  _increaseLimit: (mode) =>
+  _increaseLimit: (mode) ->
     (e) =>
       e.preventDefault()
       stateKey =

        h3 className: 'profile-extra__title--small', Lang.get('users.show.extra.top_ranks.best.title')
        if @props.scoresBest && @props.scoresBest.length
          ul className: 'profile-extra-entries',
            @props.scoresBest.map @_renderScore(@state.limitBest)
            if @state.limitBest < @props.scoresBest.length
              li className: 'profile-extra-entries__item profile-extra-entries__item--show-more',
                a href: '#', onClick: @_increaseLimit('best'), 'show more'

        h3 className: 'profile-extra__title--small', Lang.get('users.show.extra.top_ranks.first.title')
        if @props.scoresFirst && @props.scoresFirst.length
          ul className: 'profile-extra-entries',
            @props.scoresFirst.map (score, i) => @_renderScore(score, i, @state.limitFirst)
            if @state.limitFirst < @props.scoresFirst.length
              li className: 'profile-extra-entries__item profile-extra-entries__item--show-more',
                a href: '#', onClick: @_increaseLimit('first'), 'show more'
