dounan

Code:
https://github.com/dounan/react-inline-fn-benchmark/tree/master

Try it out yourself here:
https://dounan.github.io/react-inline-fn-benchmark/

The numbers below show the time (ms) it takes to render 1000 buttons 1000 times.
- For the "Class property fn" tests, each button has an `onClick` callback that is a function on the button component 
instance.
- For the "Inline fn" tests, each button has an `onClick` callback that is an inline arrow function.

dounan

/*

https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

The render callbak examples in the blog post only pass data to the
render callback, and the render callback simply renders the data.

What if wanted to pass another callback as an argument to the render
callback? Does this pattern feel ok?

dounan

class MyComponent extends React.Component {
  render() {
    const msg = "Hello " + this.props.user.name.first;
    return <PureChild onClick={() => this.props.onAlert(msg)} />;
  }
}

dounan

// ======================================================
// Original code

function MyComponent(props) {
  return <PureChild onClick={alert.bind(null, "Hello world")} />
}

// ======================================================
// After reflective-bind/babel transforms the code

dounan

function reflectiveBind(f, ctx, ...args) {
  const result = f.bind(ctx, ...args);
  Object.defineProperty(result, "__func", {value: f});
  Object.defineProperty(result, "__ctx", {value: ctx});
  Object.defineProperty(result, "__args", {value: args});
  return result;
}

function reflectiveEqual(f, g) {
  return (

dounan

import {shouldComponentUpdate} from "reflective-bind";

React.PureComponent.prototype.shouldComponentUpdate = function(
  nextProps,
  nextState
) {
  return shouldComponentUpdate(this, nextProps, nextState);
};

dounan

import {shouldComponentUpdate} from "reflective-bind";

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shouldComponentUpdate(this, nextProps, nextState);
  }
  ...
}

dounan

function memoizedBind(fn, ...args) {
  // Memoize the bind call (with cache size 1).
  if (!areArgumentsShallowlyEqual(fn.__lastArgs, args)) {
    fn.__lastResult = fn.bind.apply(fn, args);
    fn.__lastArgs = args;
  }
  return fn.__lastResult;
}

// ======================================================

dounan

// ======================================================
// Original code

function MyComponent(props) {
  const msg = "Hello " + props.user.name.first;
  return <PureChild onClick={() => alert(msg)} />
}

// ======================================================
// After reflective-bind/babel transforms the code

dounan

function MyComponent(props) {
  const msg = "Hello " + props.user.name.first;
  return <PureChild onClick={() => alert(msg)} />
}