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> );