Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Optimize Expensive Computations in Recompose

1:33 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

I have a Fibonacci component. It displays a computation result depending on the depth passed in. I have a little example app where I can change the depth or the size or the color of my component.

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

const withAppState = compose(
    withState('depth', 'setDepth', 1400),
    withState('color', 'setColor', 'red'),
    withState('size', 'setSize', 14)
);

Every time a prop changed, whether it was depth, size or color, the Fibonacci was computed.

Fibonacci

I'd rather not compute this result every time a prop changed. I'd like to change this so it just gets the result and displays it directly.

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

I'm going to do the work in a new higher order component called lazyResult. lazyResult is going to make use of the withPropsOnChange higher-order component from Recompose. It takes in two params.

The first param is an array of prop names that we want to wait for changes in. We only want to recalculate the result when the depth changes. The next param is a prop creator. It takes in the owner props, and it has to return a prop object to merge with the owner props.

const lazyResult = withPropsOnChange(
    ['depth'],
    ({ depth }) => ({

    })
);

We'll take in the depth, and we'll return a result that contains the fibonacci computation. When I refresh, we'll see the computed number change every time I change the depth. Now, when I change the size or the color, the computed number doesn't go up.

const lazyResult = withPropsOnChange(
    ['depth'],
    ({ depth }) => ({
        result: fibonacci(depth)
    })
);


HEY, QUICK QUESTION!
Joel's Head
Why are we asking?