react-purifiers v0.1.9

A collection of functions and components that help you boost your app's performance by taking advantage of React's shouldComponentUpdate lifecycle method.

Attention: This package isn't at a stable stage. If you encounter any strange behavior, please open an issue.

Installation

You can install this package via npm or yarn:

npm install react-purifiers

or

yarn add react-purifiers

Usage

childlessPureSCU

This SCU is the same SCU PureComponent uses, except that it skips the children prop.

import React from 'react';
import { childlessPureSCU } from 'react-purifiers';

class Foo extends React.Component {

  // ...

  shouldComponentUpdate = childlessPureSCU.bind(this);

  // ...
}

withPurification

You can use this HOC to wrap your component and make it pure based on some of its props.

import React from 'react';
import { withPurification } from 'react-purifiers';

class Foo extends React.Component {
  // ...
}

Foo = withPurification(['propName1', 'propName2', /* ... */])(Foo);

Note: Use this with caution. If you don't pass a prop name which your component depends on, it won't get updated.

Pure

If you want to make a component pure based on some of its props, you can wrap it with the Pure component and pass the values of those props to its $ prop as an array or object.

This is useful especially if the inner component is from an external library. You can use withPurification HOC to purify your own components.

import React from 'react';
import { Pure } from 'react-purifiers';

// ...

<Pure $={[
  valueA,
  valueD,
]}>
  <ChildComponent
    propA={valueA}
    propB={valueB}
    propC={valueC}
    propD={valueD}
  >
    {/* ... */}
  </ChildComponent>
</Pure>

Note: Use this component with caution. If you don't pass a prop which your inner components depend on, they won't get updated.

The Philosophy

Why I created this package, you ask?

As you might know, React's class-based components have a lifecycle method called shouldComponentUpdate (SCU). It can be used to let React know if our component needs to be rendered or not based on the changes in props and state. We can use this method to stop the unnecessary renders and improve our app's performance.

React has another class to inherit our components from called PureComponent. This one implements the SCU method for us with a shallow comparison of the props and state. If it doesn't detect any changes, the component wouldn't be updated. Sounds perfect, doesn't it?

But this approach doesn't work in lots of cases. Mainly because of the children prop. It is a prop; So the shallow comparison takes effect. But if just one of the children components gets rendered, the children prop of the parent component changes (Which necessarily isn't a bad thing. But if one of the children uses a HOC as its wrapper, it gets rendered every time). In these cases PureComponent isn't the answer.

To work around this problem, I created a simple function called childlessPureSCU which can be used as the SCU method. It mainly does what a PureComponent do. The only difference is that it doesn't affect the children prop.

Another reason is that React doesn't support pure functional components (at the moment at least). They get rendered every time. For this case, you can use the Pure component as a wrapper to add purity to your functional components.

There are other functions and components available in the package which provide more flexibility to address your particular use cases. Docs will be available soon.

License

MIT