react-bind-closures

Bind closures to stateless React components to avoid creating closures at render time

Install

$ npm install --save react-bind-closures

The Problem

Many React developers are beginning to prefer and advocate for creating stateless React components with pure functions. While these "dumb" components are simple and more predictable, they can come with some performance issues. The biggest problem they face is how to avoid creating closures.

A big React anti-pattern is to create closures at render time because multiple renders means multiple closures which means more object creation and GC time (link).

Example:

// TodoItem creates a new closure for the `onClick` handler every time its
// rendered/invoked
const TodoItem = ({ id, title, onComplete }) => (
  <li>
    <div>{title}</div>

    <button onClick={() => onComplete(id)}>
      Complete
    </button>
  </li>
);

const TodoList = ({ items, onComplete }) => (
  <ul>
    {items.map(item => (
      <TodoItem
        key={item.id}
        onComplete={onComplete}
        {...item}
      />
    ))}
  </ul>
);

The usual approach to solve this is to create your React component instead as a class and autobind a helper method that allows you to avoid creating closures during render time.

// With `React.createClass` which autobinds methods
const TodoItem = React.createClass({
  onComplete() {
    this.props.onComplete(this.props.id);
  },

  render() {
    return (
      <li>
        <div>{title}</div>

        <button onClick={this.onComplete}>
          Complete
        </button>
      </li>
    );
  },
});

// With ES2015 class and ES.later class properties
class TodoItem extends React.Component {
  onComplete = () => this.props.onComplete(this.props.id);

  render() {
    return (
      <li>
        <div>{title}</div>

        <button onClick={this.onComplete}>
          Complete
        </button>
      </li>
    );
  }
}

Ideally, we would like to continue to write our components as functions, but still avoid creating closures during rendering.

The Solution

react-bind-closures allows you to create closures at mount time instead of render time for your stateless components. This greatly helps performance by avoiding the costs already mentioned. react-bind-closures exports a function called bindClosures that underneath the hood wraps your stateless component with a class component to benefit from autobinding methods. But, you still write your stateless component just the same and never have to worry about writing this either!

Usage

Rewriting our previous example with bindClosures looks something like this:

import bindClosures from 'react-bind-closures';

// Here `onComplete` will be the new bound closure created at mount time. It
// knows to pass in the `id` to the original `onComplete` handler.
let TodoItem = ({ title, onComplete }) => (
  <li>
    <div>{title}</div>
    <button onClick={onComplete}>Complete</button>
  </li>
);

// Inject a new `onComplete` that receives the original props.
TodoItem = bindClosures({
  onComplete(props) {
    props.onComplete(props.id);
  }
})(TodoItem);

const TodoList = ({ items, onComplete }) => (
  <ul>
    {items.map(item => (
      <TodoItem
        key={item.id}
        onComplete={onComplete}
        {...item}
      />
    ))}
  </ul>
);

As you can see, bindClosures allows you to create one time closures that will be injected into your component. In this example, we redefine the onComplete closure that gets passed into the component. The new closure will receive the original props that were passed into the component. This includes the original onComplete handler. From here we can call it with the id just like the previous examples but without creating closures every render.

bindClosures is a curried function, so it's similar to other decorator functions like connect from react-redux. First, call it with your bound closure definitions. You'll receive back a function that you can then call on a stateless component function to receive back a decorated component that will bind the defined closures.

Reminder

Please remember that this library is meant to be used with STATELESS components. This package will attempt to call the decorated component as a function. Additionally, you don't really need this library for class components because you can handle autobinding methods already with them.