Learn How Recompose Optimizes Higher Order Components

Tim Kindberg
InstructorTim Kindberg

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

Learn about optimizations (like component squashing) that Recompose uses behind the scenes. More reading on Performance.

[00:00] Behind the scenes, recompose actually employs a couple of optimizations. They have a utility for creating eager factories. It's called createEagerFactory(). You pass it your component that you want create a factory of.

[00:18] Now we still return a component, just like before, but this time it calls the factory. If we're still doing an overrideProps higher-order component, the first argument is the props that the factory takes, so we want to spread in the props, and we want to spread in the overrideProps. The next param is the children. We want to pass in props.children.

[00:47] I want to make it clear you would not do this in your own code. This is something only done behind the scenes in the recompose code. What does createEagerFactory() do? That's a good question. Let's go look.

[01:01] Down here, hidden away, I'm simulating what's happening behind the scenes in recompose, I've got one utility class already written out for me. It's basically just a Boolean checker. You pass it a component, and it returns true or false answering the question, "Is this component a class-based component?", so is it using the class extends or the React.createClass() method for creating the component?

[01:28] Next we have another helper. This one is actually going to answer the question, is this component a referentially transparent function component? What does that even mean? It means it has a type of component as a function, and it is not a class component.

[01:54] Essentially, we want to check if this is a stateless functional component that has no additional baggage, meaning static properties like default props, contact types, or propTypes. What that boils down to is it's just a function, and we can call it and get a return value.

[02:12] Now let's implement our createEagerFactory(). This is going to return a factory that will take in props and children. It's going to check a couple of things. If the component is referentially transparent, then we want to check one more thing -- does it have any children? If so, call the component as a function, not with JSX. Go ahead and spread in the props and the children.

[02:52] Otherwise, call the component with just the props. If we don't have that convenience of being able to call the component as a function, then we want to call it normally. In that, we're going to use JSX. This is what it's doing behind the scenes in recompose.

[03:12] The important bit here or the part that is actually making an optimization is this part right here. This is doing something that they've called component squashing. Essentially, they're not adding this component to the component tree. They're just calling the function like a normal JavaScript function and returning the contents inside.

[03:31] Now, when we refresh the page, it works just like before, except maybe a little bit faster.

David Mosher
David Mosher
~ 5 years ago

End of the video has some audio that got cut off, but I assume Tim was going to say "just maybe a little bit faster" :)

~ 4 years ago

Thans, this is a good course - but I think it's lacking on some important issues, such as:

  1. Why and when use HOC and recompose - and when NOT use it.
  2. What and how to unit-test different parts of an enhanced component, in detail
  3. Application and files structure strategies
  4. More of the API covered. I, for one, would hope for a good withContext lesson