Reflective Bind

With reflective-bind, you can freely use inline functions in render without worrying about wasteful re-rendering of React pure components. It works for both stateless functional components and class components. The best part is, it requires almost no code change 🙌

Check out our blog post for more info on the motivation and the inner workings of reflective-bind.

Performance Benefits

For one of Flexport's more complex forms, turning on the Babel transform reduced the wasted render time from 175ms to 18ms. Your mileage will vary based on the structure of your app and your use of pure components.

Installation

``sh
npm install --save reflective-bind
`

Using the babel plugin

_NOTE: the design goal of the plugin is to preserve the semantics of your code. Your inline functions will still create new function instances each render. The transform simply enables the equality comparison of two function instances via reflection._

Add it to the top of your plugin list in .babelrc (it must be run before other plugins that transform arrow functions and bind calls):

`
"plugins": [
["reflective-bind/babel", {"log": "debug"}],
...
]
`

And call reflective bind’s shouldComponentUpdate helper function in your component:

`js
import {shouldComponentUpdate} from "reflective-bind";

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

Alternatively, subclass React.Component and override shouldComponentUpdate. Then extend your custom component when you want a pure component.

`js
import * as React from "react";
import {shouldComponentUpdate} from "reflective-bind";

export default class CustomPureComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return shouldComponentUpdate(this, nextProps, nextState);
}
}
`

If you do not want the babel plugin to process a specific file, add the following line to your file:

`js
// @no-reflective-bind-babel
`

$3

#### propRegex (_default: transform all props_)

When specified, only transform props whose name matches the regular expression. The intended use case is to avoid transforming render callbacks, as this can lead to stale render bugs.

For example, if all of your non-render callbacks are prefixed with on, such as onClick, consider using "propRegex": "^on[A-Z].*$".

#### log (_default: off_)

Specifies the minimum level of logs to output to the console. Enabling logging at a given level also enables logging at all higher levels.

* debug - output messages useful for debugging (e.g. which functions are transformed).
* info - output helpful information (e.g. optimization tips).
* warn - output warnings (e.g. which functions cannot be transformed). These can usually be fixed with some simple refactoring.
* off - disable logging. Recommended for production.

$3

The babel plugin will add ES6 import declarations to your code. This shouldn’t be an issue if you’re using using babel-preset-env or babel-preset-es2015, but just make sure that some plugin/preset can transform the import declarations to your needs.

$3

The plugin simply transforms inline functions into calls to reflectiveBind. This then allows the shouldComponentUpdate helper function to use reflectiveEqual in the shallow comparison equality check.

Using reflectiveBind manually

Binding your function with reflectiveBind simply stores the original function, the context (thisArg), and the arguments as properties on the bound function instance. This allows you to check if two reflectively bound functions are equal.

`js
import reflectiveBind, {reflectiveEqual} from "reflective-bind";

function baseFn(msg) {
alert(msg);
}

const fn1 = reflectiveBind(baseFn, undefined, "hello");
const fn2 = reflectiveBind(baseFn, undefined, "hello");

fn1 === fn2; // false
reflectiveEqual(fn1, fn2); // true

const fn3 = reflectiveBind(baseFn, undefined, "world");
reflectiveEqual(fn1, fn3); // false
`

Note that reflectiveEqual only works for reflectively bound functions.

`js
reflectiveEqual(1, 1); // false
reflectiveEqual(baseFn, baseFn); // false
`

We also expose a isReflective helper function that lets you check if something is a reflectively bound function.

$3

All exported functions are flow typed out of the box. reflectiveBind is typed with function overloading:

`
// Function with 0 args
declare function reflectiveBind(f: () => A, ctx: mixed): () => A;

// Function with 1 arg
declare function reflectiveBind(f: (A) => B, ctx: mixed): A => B;

declare function reflectiveBind(f: (A) => B, ctx: mixed, a: A): () => B;

...
`

We currently support reflectiveBind calls up to 4 args:

`js
reflectiveBind(baseFn, ctx, a, b, c, d);
`

Babel plugin examples

The following are examples of some inline functions that will be transformed into calls to reflectiveBind by the babel plugin:

* Inline arrow functions:

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

* Function.prototype.bind:

`jsx
function MyComponent(props) {
const handleClick = props.callback.bind(undefined, "yay");
return ;
}
`

* Multiple assignments / reassignments:

`jsx
function MyComponent(props) {
let handleClick = () => {...};

if (...) {
handleClick = () => {...};
} else if (...) {
handleClick = () => {...};
}

return
}
`

* Ternary expressions:

`jsx
function MyComponent(props) {
const handleClick = props.condition
? () => {...}
: () => {...};

return
}
`

* For maximum optimization, avoid accessing nested attributes in your arrow function. Prefer to pull the nested value out to a const and close over it in your arrow function.

`jsx
function MyComponent(props) {
// PureChild will re-render whenever props changes (bad)
const badHandleClick = () => alert(props.user.name.first);

const firstName = props.user.name.first;
// Now, PureChild will only re-render when firstName changes (good)
const goodHandleClick = () => alert(firstName);

return (