Slow React Example

App.jsx

class GlyphiconGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {filter: ''};
    this.glyphicons = ["asterisk", "plus", "euro", "eur", "minus", "cloud", "envelope", "pencil", "glass",
                       "music", "search", "heart", "star", "star-empty", "user", "film", "th-large", "th", "th-list", "ok",
                       "remove", "zoom-in", "zoom-out", "off", "signal", "cog", "trash", "home", "file", "time", "road",
                       "download-alt", "download", "upload", "inbox", "play-circle", "repeat", "refresh", "list-alt", "lock",
                       "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags",
                       "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width",
                       "align-left", "align-center", "align-right", "align-justify", "list", "indent-left", "indent-right",
                       "facetime-video", "picture", "map-marker", "adjust", "tint", "edit", "share", "check", "move",
                       "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward",
                       "step-forward", "eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign", "remove-sign",
                       "ok-sign", "question-sign", "info-sign", "screenshot", "remove-circle", "ok-circle", "ban-circle",
                       "arrow-left", "arrow-right", "arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small",
                       "exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close", "warning-sign", "plane", "calendar",
                       "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder-close",
                       "folder-open", "resize-vertical", "resize-horizontal", "hdd", "bullhorn", "bell", "certificate",
                       "thumbs-up", "thumbs-down", "hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right",
                       "circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe", "wrench", "tasks", "filter",
                       "briefcase", "fullscreen", "dashboard", "paperclip", "heart-empty", "link", "phone", "pushpin", "usd",
                       "gbp", "sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order", "sort-by-order-alt",
                       "sort-by-attributes", "sort-by-attributes-alt", "unchecked", "expand", "collapse-down", "collapse-up",
                       "log-in", "flash", "log-out", "new-window", "record", "save", "open", "saved", "import", "export",
                       "send", "floppy-disk", "floppy-saved", "floppy-remove", "floppy-save", "floppy-open", "credit-card",
                       "transfer", "cutlery", "header", "compressed", "earphone", "phone-alt", "tower", "stats", "sd-video",
                       "hd-video", "subtitles", "sound-stereo", "sound-dolby", "sound-5-1", "sound-6-1", "sound-7-1",
                       "copyright-mark", "registration-mark", "cloud-download", "cloud-upload", "tree-conifer", "tree-deciduous",
                       "cd", "save-file", "open-file", "level-up", "copy", "paste", "alert", "equalizer", "king", "queen", "pawn",
                       "bishop", "knight", "baby-formula", "tent", "blackboard", "bed", "apple", "erase", "hourglass", "lamp",
                       "duplicate", "piggy-bank", "scissors", "bitcoin", "yen", "ruble", "scale", "ice-lolly", "ice-lolly-tasted",
                       "education", "option-horizontal", "option-vertical", "menu-hamburger", "modal-window", "oil", "grain",
                       "sunglasses", "text-size", "text-color", "text-background", "object-align-top", "object-align-bottom",
                       "object-align-horizontal", "object-align-left", "object-align-vertical", "object-align-right", "triangle-right",
                       "triangle-left", "triangle-bottom", "triangle-top", "console", "superscript", "subscript", "menu-left",
                       "menu-right", "menu-down", "menu-up"]
  }

  onChange(e) {
    this.setState({filter: e.target.value})
  }

  render() {
    let gridItem = function(glyphName) {
    return (
      <li key={glyphName}>
          <span className={"glyphicon glyphicon-"+glyphName}></span>
          <p>{glyphName}</p>
      </li>
      );
    }

    return (
      <div className="GlyphiconGrid">
        <h1>Glyphicons!</h1>
        <div className="input-group">
          <span className="input-group-addon" id="basic-addon1"><span className='glyphicon glyphicon-search'></span></span>
          <input type="text" value={this.state.filter} onChange={this.onChange.bind(this)} className="form-control" placeholder="Filter" aria-describedby="basic-addon1" />
        </div>
        <ul>
          {this.glyphicons.map(gridItem)}
        </ul>
      </div>
    )
  }
}

React.render(<GlyphiconGrid />, document.body);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Why is this so slow?</title>
    <script src="http://fb.me/react-0.13.0-rc1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.0-rc1.js"></script>
  </head>
  <body><script type="text/jsx">
var GlyphiconGrid = React.createClass({
  getInitialState : function() {
    return {filter: ''};
  },

  componentWillMount : function() {
    this.glyphicons = ["asterisk", "plus", "euro", "eur", "minus", "cloud", "envelope", "pencil", "glass",
                       "music", "search", "heart", "star", "star-empty", "user", "film", "th-large", "th", "th-list", "ok",
                       "remove", "zoom-in", "zoom-out", "off", "signal", "cog", "trash", "home", "file", "time", "road",
                       "download-alt", "download", "upload", "inbox", "play-circle", "repeat", "refresh", "list-alt", "lock",
                       "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags",
                       "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width",
                       "align-left", "align-center", "align-right", "align-justify", "list", "indent-left", "indent-right",
                       "facetime-video", "picture", "map-marker", "adjust", "tint", "edit", "share", "check", "move",
                       "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward",
                       "step-forward", "eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign", "remove-sign",
                       "ok-sign", "question-sign", "info-sign", "screenshot", "remove-circle", "ok-circle", "ban-circle",
                       "arrow-left", "arrow-right", "arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small",
                       "exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close", "warning-sign", "plane", "calendar",
                       "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder-close",
                       "folder-open", "resize-vertical", "resize-horizontal", "hdd", "bullhorn", "bell", "certificate",
                       "thumbs-up", "thumbs-down", "hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right",
                       "circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe", "wrench", "tasks", "filter",
                       "briefcase", "fullscreen", "dashboard", "paperclip", "heart-empty", "link", "phone", "pushpin", "usd",
                       "gbp", "sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order", "sort-by-order-alt",
                       "sort-by-attributes", "sort-by-attributes-alt", "unchecked", "expand", "collapse-down", "collapse-up",
                       "log-in", "flash", "log-out", "new-window", "record", "save", "open", "saved", "import", "export",
                       "send", "floppy-disk", "floppy-saved", "floppy-remove", "floppy-save", "floppy-open", "credit-card",
                       "transfer", "cutlery", "header", "compressed", "earphone", "phone-alt", "tower", "stats", "sd-video",
                       "hd-video", "subtitles", "sound-stereo", "sound-dolby", "sound-5-1", "sound-6-1", "sound-7-1",
                       "copyright-mark", "registration-mark", "cloud-download", "cloud-upload", "tree-conifer", "tree-deciduous",
                       "cd", "save-file", "open-file", "level-up", "copy", "paste", "alert", "equalizer", "king", "queen", "pawn",
                       "bishop", "knight", "baby-formula", "tent", "blackboard", "bed", "apple", "erase", "hourglass", "lamp",
                       "duplicate", "piggy-bank", "scissors", "bitcoin", "yen", "ruble", "scale", "ice-lolly", "ice-lolly-tasted",
                       "education", "option-horizontal", "option-vertical", "menu-hamburger", "modal-window", "oil", "grain",
                       "sunglasses", "text-size", "text-color", "text-background", "object-align-top", "object-align-bottom",
                       "object-align-horizontal", "object-align-left", "object-align-vertical", "object-align-right", "triangle-right",
                       "triangle-left", "triangle-bottom", "triangle-top", "console", "superscript", "subscript", "menu-left",
                       "menu-right", "menu-down", "menu-up"]
  },

  onChange: function(e) {
    this.setState({filter: e.target.value})
  },

  render: function() {
    var gridItem = function(glyphName) {
    return (
      <li key={glyphName}>
          <span className={"glyphicon glyphicon-"+glyphName}></span>
          <p>{glyphName}</p>
      </li>
      );
    }

    return (
      <div className="GlyphiconGrid">
        <h1>Glyphicons!</h1>
        <div className="input-group">
          <span className="input-group-addon" id="basic-addon1"><span className='glyphicon glyphicon-search'></span></span>
          <input type="text" value={this.state.filter} onChange={this.onChange.bind(this)} className="form-control" placeholder="Filter" aria-describedby="basic-addon1" />
        </div>
        <ul>
          {this.glyphicons.map(gridItem)}
        </ul>
      </div>
    )
  }
});

React.render(<GlyphiconGrid />, document.body);
</script></body>
</html>