React Purist

Creates truly pure components that only update if their old props are not identical to their previous props.

Motivation

One big performance issue in React is dealing with code like this:

<MyComp clickHandler={() => props.handleClick(props.someValue)}>
<SomeComp someObject={{ foo: true }}>

Since () => { return true } !== () => { return true } and { foo: true } !== { foo: true }, code like this causes components to rerender every time, rather than only when their props actually change.

React Purist checks the string value of props to see if they are identical. If they are identical, meaning nothing would need to change in your components anyways, the re-render is prevented.

Class Implementation

import { Purify } from 'react-purist';

@Purify
class MyPureComponent extends Component {
    // ...
}

export default MyPureComponent

Stateless Implementation

import { Purify } from 'react-purist';

const MyPureComponent = (props) => {
    return (
        <p>Purify</p>
    );
;}

export default Purify(MyPureComponent);