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