React Pure Events

A HOC wrapper that makes events props passed to React PureComponents pure.

React Pure Events can be used to make event properties "pure" no matter what is passed to your component.

Normally if someone passes onEvent={() => {}} in a render method to your PureComponent it will completely break the PureComponent optimization. Every single render a new function instance will be created so nextProps.onEvent === prevProps.onEvent will never be true.

React Pure Events wraps your PureComponent in a Higher Order Component (HOC) that replaces the function values for any props you define as an event prop with a function that will still call the function passed as a prop, but will not change between renders. Guaranteeing that your PureComponent optimizations work no matter how the caller defines the event.

The guard version also guarantees that the prop will never be a non-function, so you can safely call this.props.onEvent() without testing the type or providing your own noop.

Installation

npm install --save react-pure-events

Using

wrapPureEventProps(...events)

wrapPureEventProps wraps a PureComponent with a HOC that replaces a set of event props with functions that call the event prop, but if passed are the same on every render() call even if the actual function passed to the HOC changes.

This guarantees that even if a caller uses onEvent={() => {}} which causes a new function instance to be passed every render the PureComponent will always receive the same prop and remain purely optimized.

import React, {PureComponent} from 'react';
import {wrapPureEventProps} from 'react-pure-events';

// As a decorator
@wrapPureEventProps('onEvent', 'onEvent2')
export default class MyComponent extends PureComponent {
    onSomethingFinished() {
        if ( this.props.onEvent ) {
            this.props.onEvent();
        }
    }
    // ...
}

// As a function
class MyComponent extends PureComponent {
    // ...
}

export default wrapPureEventProps('onEvent', 'onEvent2')(MyComponent);

guardPureEventProps(...events)

guardPureEventProps does the same as wrapPureEventProps, but also guarantees that if an event prop is not a function (not passed or invalid) a noop function will be passed instead.

import React, {PureComponent} from 'react';
import {guardPureEventProps} from 'react-pure-events';

// As a decorator
@guardPureEventProps('onEvent', 'onEvent2')
export default class MyComponent extends PureComponent {
    onSomethingFinished() {
        this.props.onEvent();
    }
    // ...
}

// As a function
class MyComponent extends PureComponent {
    // ...
}

export default guardPureEventProps('onEvent', 'onEvent2')(MyComponent);