import React from 'react';
import {createSelector, createWrapper} from 'react-memo';
 
const TotalViewer = ({total}) => <span>{total}</span>;
 
// The first argument is the alias.
// The second is the array of value selectors.
// These must be pure and very fast.
// Re-evaluation is decided from changes to the returned
// value from these value selectors via ===.
// The last argument is the function that calculates the value
// of the property passed down. Which is called with the
// values returned from selectors in the same order.
// This is where the heavy calculations go.
const selector: any = createSelector('total', [
  (props) => props.pocket,
  (props) => props.bank,
], (pocket, bank) => /* Intense monetary calcuations */ pocket + bank);
 
const TotalViewerWrapper = createWrapper(selector)(TotalViewer);
 
const TotalMoneyIHave = (props) => <TotalViewerWrapper pocket={props.pocket} bank={0} />;
 

import React from 'react';
import {createSelector, createWrapper} from 'react-memo';
 
const TotalViewer = ({total, currencySymbol}) =>
  <span>{total}{currencySymbol}</span>;
 
const totlaSelector: any = createSelector('total', [
  (props) => props.pocket,
  (props) => props.bank,
], (pocket, bank, currency) => pocket + bank);
 
// Value selectors are also passed context.
// However inorder to use context you must provide the contextTypes.
const currencySymbolSelector: any = createSelector('currencySymbol', [
  (props, context) => context.currency,
], (currency) => currency ? currency : '$');
 
const contextTypes = { currency: React.PropTypes.string };
 
const TotalViewerWrapper = createWrapper([
  totlaSelector,
  currencySymbolSelector,
], {contextTypes})(TotalViewer);
 
const TotalMoneyIHave = (props) => <TotalViewerWrapper pocket={props.pocket} bank={0} />;
 

// Returns a property selector you can pass down to createWrapper
function createSelector(
  alias: string,
  selectors: Array<(props, context) => any>,
  resolver: (...values: any[]) => any
): Selector;
 
// Provide single selector
function createSelector(
  alias: string,
  selectors: (props, context) => any,
  resolver: (value: any) => any
): Selector;
 
// Provide no selectors, resolver will be called only once
// during the lifetime of the component.
function createSelector(alias: string, resolver: () => any): Selector;

createWrapper(selectors: Selector, options?: Options): Wrapper;
createWrapper(selectors: Selector[], options?: Options): Wrapper;
 
// Options: {propTypes, contextTypes};
 
// Wrapper: (Component) => WrappedComponent;