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
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:
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.
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:
Plugin options
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.
Dependencies
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.
What the plugin does
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.
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;
reflectiveEqual(fn1, fn2);
const fn3 = reflectiveBind(baseFn, undefined, "world");
reflectiveEqual(fn1, fn3);
Note that reflectiveEqual
only works for reflectively bound functions.
reflectiveEqual(1, 1);
reflectiveEqual(baseFn, baseFn);
We also expose a isReflective
helper function that lets you check if something is a reflectively bound function.
Flow types
All exported functions are flow typed out of the box. reflectiveBind
is typed with function overloading:
// Function with 0 args
declare function reflectiveBind<A>(f: () => A, ctx: mixed): () => A;
// Function with 1 arg
declare function reflectiveBind<A, B>(f: (A) => B, ctx: mixed): A => B;
declare function reflectiveBind<A, B>(f: (A) => B, ctx: mixed, a: A): () => B;
...
We currently support reflectiveBind
calls up to 4 args:
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:
function MyComponent(props) {
const msg = "Hello " + props.user.name.first;
return <PureChild onClick={() => alert(msg)} />;
}
function MyComponent(props) {
const handleClick = props.callback.bind(undefined, "yay");
return <PureChild onClick={handleClick} />;
}
- Multiple assignments / reassignments:
function MyComponent(props) {
let handleClick = () => {...};
if (...) {
handleClick = () => {...};
} else if (...) {
handleClick = () => {...};
}
return <PureChild onClick={handleClick} />
}
function MyComponent(props) {
const handleClick = props.condition
? () => {...}
: () => {...};
return <PureChild onClick={handleClick} />
}
- 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.
function MyComponent(props) {
const badHandleClick = () => alert(props.user.name.first);
const firstName = props.user.name.first;
const goodHandleClick = () => alert(firstName);
return (
<div>
<PureChild onClick={badHandleClick} />
<PureChild onClick={goodHandleClick} />
</div>
);
}
Unsupported cases
There are a few edge cases that can cause an arrow function to not be transformed. Nothing breaks, you just won’t have optimized code.
- Your arrow function should not close over variables whose value is set after the arrow function.
function MyComponent(props) {
let foo = 1;
const badHandleClick = () => {
alert(foo);
};
foo = 2;
return <PureChild onClick={badHandleClick} />;
}
- Your arrow function must be defined inline the JSX, or at most 1 reference away.
function MyComponent(props) {
const fn = () => {...};
const badHandleClick = fn;
const goodHandleClick = () => {...};
return (
<div>
<PureChild onClick={badHandleClick} />
<PureChild onClick={goodHandleClick} />
{/* This will be optimized since it is defined directly in the JSX */}
<PureChild onClick={() => {...}} />
</div>
);
}