How to find one matching element in an JavaScript array

There is a new JavaScript function in ECMAScript 2015 (ES6) called Array.prototype.find() that helps finding one matching element in an array:

var foundElement = [1,2,3].find(function() { return this == 2 });
if(found) {
   // Do something

You may need a polyfill to get support for all the browsers that you want to support. See the MDN article about Array.prototype.find for more information about what polyfill to use.

React Performance Tip: Beware of bind in event handlers

I got a performance problem in one of my React components today. It was basicly a long list, where every item was mapped to the renderItem call:

renderItem: function(item) {
  return <div onClick={this.handleItemClick.bind(this,}>{item.text}</div>

When you first clicked or interacted with the React component there was a about 2 secound lag in Chrome before it acted on the click. After that the speed was a little better.

Turns out this was because of the bind call in the onClick handler.

What bind kinda does, is that it declares a new function inline that calls the function with the new parameters. If you think about it, then declaring one new function per item – each render – is a lot of work.

What I did to fix it, was to extract the item into it’s own React component. That was I did not need to pass the parameters to the handle function, as I could just read them from the props

render: function() {
  return <div onClick={this.handleItemClick}>{this.props.text}
handleItemClick: function() {
  // Just read here, and maybe call a function on props like: this.props.onClick(

This fixes it, and it actually turned out to be a good refactoring as well. So a win-win.

React Performance Tip: Use the minified version of React

I noticed today, that a component that I wrote was a little slow.

It turned out that it was slow because of the extra checks that React makes when it is in “Development Mode”. If I used the minified version the performance boost what significant.

So remember: Use the react.min.js file in production. Do not minify the react.js file yourself – that will not give you the performance boost.