React Shallow Context

Pure shallow equal for update propagation in 300b.

Goal

This package optimizes React.Context API, implementing calculateChangedBits, which works the same way shouldComponentUpdate or just PureComponent works - optimizes the way React react to updated

The problem

It is common to store something inside context Provider. Something like this

<Provider value={{key1: 1, key2: 2}} />

That would produce a new value every time, causing all Consumers to update, and causing React to traverse all the tree, to find those Consumers. This package provides a way to handle the value change event, and suppress unnecessary updates.

API

createPureContext(defaultValue)

Creates "pure" context, the same "pure" as in "PureComponent". This is basically React.createContext(xx, pureContextCompare)

👎 import {createContext} from 'react';
const context = createContext();

👍 import {createPureContext} from 'react-shallow-context';
const context = createPureContext();

pureContextCompare

shallow compares the old and the next context value. Supress update if the are the same.

import {pureContextCompare} from 'react-shallow-context';
const context = React.createContext({}, pureContextCompare);

// equal to
const context = createPureContext({});

updateIgnoring(keys)

The same, but ignoring selected keys. Useful then context contain some callback function, which could be allways the different, but play a role, only when anther value got changed.

import {updateIgnoring} from 'react-shallow-context';
const context = React.createContext({importantValue, notImportantValue}, updateIgnoring(['notImportantValue']));

updateOnlyFor(keys)

The same, but with inversed logic.

import {updateOnlyFor} from 'react-shallow-context';
const context = React.createContext({importantValue, notImportantValue}, updateOnlyFor(['importantValue']));

Licence

MIT

hedgerh/react-shallow-context