reactjs component rendering really slow for a list

Question

I have component

import React from 'react';
import {NavLink} from 'fluxible-router';
import SurahsStore from 'stores/SurahsStore';
import connectToStores from 'fluxible-addons-react/connectToStores';
import debug from 'utils/Debug';
import classNames from 'classnames';

class SurahsNav extends React.Component{
  constructor(props, context) {
    super(props, context);
  }

  list() {
    return this.props.surahs.map((surah, index) => {
      return (
        <li key={`surah-${index}`}>
          <NavLink routeName="surah" navParams={{surahId: surah.id}}>
            <div className="row">
              <div className="col-md-2 col-xs-2">
                <span className="surah-num">
                  {surah.id}
                </span>
              </div>
              <div className="col-md-7 col-xs-7">
                <span className="suran-name">{surah.name.simple}</span>
                <br />
                <span className="surah-meaning">{surah.name.english}</span>
              </div>
              <div className="col-md-3 col-xs-3 text-right">
                {surah.name.arabic}
              </div>
            </div>
          </NavLink>
        </li>
      );
    });
  }

  shouldComponentUpdate(nextState, nextProps) {
    return false;
  }

  render() {
    debug('component:SurahsNav', 'Render');

    let classes = classNames({
      'surahs-nav col-md-12 col-xs-12': true,
      [this.props.className]: true
    });

    return (
      <div className={classes}>
        <ul>
          {this.list()}
        </ul>
      </div>
    );
  }
}

SurahsNav.contextTypes = {
  getStore: React.PropTypes.func.isRequired,
};

SurahsNav = connectToStores(SurahsNav, [SurahsStore], (context, props) => {
  const surahsStore = context.getStore(SurahsStore);

  return {
    surahs: surahsStore.getSurahs()
  };
});

export default SurahsNav;

I have tested by process of elimination everything around and that relates to this component, from it's siblings, to the connection to stores by hard coding the props, everything. The list is simply 114 small objects, which I even do something similar to this elsewhere, but not this component.

This component on average takes ~150-200ms to render, which is unusual because I do something similar in another component and takes under 8ms to render. Something is wrong and I cannot figure out what the problem is.

Any thoughts for how to determine where my performance is dropping off?

Thanks!

score 0 · Answer 1 · answered Nov 10 '15 at 16:45

How about this way.

  shouldComponentUpdate(nextState, nextProps) {
    return false;
  }

  render() {
   var list = this.props.surahs.map((surah, index) => {
      return (
        <li key={index}>
          <NavLink routeName="surah" navParams={{surahId: surah.id}}>
            <div className="row">
              <div className="col-md-2 col-xs-2">
                <span className="surah-num">
                  {surah.id}
                </span>
              </div>
              <div className="col-md-7 col-xs-7">
                <span className="surah-name">{surah.name.simple}</span>
                <br />
                <span className="surah-meaning">{surah.name.english}</span>
              </div>
              <div className="col-md-3 col-xs-3 text-right">
                {surah.name.arabic}
              </div>
            </div>
          </NavLink>
        </li>
      );
    });
   }
    debug('component:SurahsNav', 'Render');

    let classes = classNames({
      'surahs-nav col-md-12 col-xs-12': true,
      [this.props.className]: true
    });

    return (
      <div className={classes}>
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}

reactjs component rendering really slow for a list

1 Answers1