[Recompose] Compute Expensive Props Lazily using Recompose

Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props.

withPropsOnChange(
  shouldMapOrKeys: Array<string> | (props: Object, nextProps: Object) => boolean,
  createProps: (ownerProps: Object) => Object
): HigherOrderComponent

Instead of an array of prop keys, the first parameter can also be a function that returns a boolean, given the current props and the next props. This allows you to customize when createProps() should be called.

const { Component } = React;
const { withPropsOnChange, withState, withHandlers, compose } = Recompose;


// only generate 'result' when depth changed
const lazyResult = withPropsOnChange(
  ['depth'],
  ({ depth }) => ({
    result: fibonacci(depth)
  })
);

const Fibonacci = lazyResult(({ result, color, size }) =>
  <div style={{ color, fontSize: size }}>
    Fibonacci Result:<br/>{ result }
  </div>
);