Optimize Expensive Computations in Recompose

Tim Kindberg
InstructorTim Kindberg
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

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.

[00:00] 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.

[00:14] Every time a prop changed, whether it was depth, size or color, the Fibonacci was computed. 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.

[00:29] I'm going to do the work in a new higher order component called LazyResult(). LazyResult is going to make use of the width props onChange higher-order component from Recompose. It takes in two params.

[00:50] 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.

[01:11] 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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today