How I Learned To Use HOC’s and Render Props

I scowled at the monitor, my eyes lit by backlight neon colours. I am supposed to be building a List component, but instead I was slumbered. Head in my arms, lost in thought…. and then I looked again at the code, and I saw daylight, for the first time in a long time. I saw daylight.

Click “Open Sandbox” to see the JS code

It was my first attempt. At least a List component was rendering. I was ready to sleep and call it a night.

Nevertheless, deep down, my gut told me I needed to do some more soul searching. After three rounds of prana yoga, the answer came to me. Thesites variable should not be defined in the List component, hopelessly created every single time React decided to re-render List. It was a shameful waste of resources, not to mention what would happen if I wanted the same functionality in another component. I would pack up and move to Costa Rica.

No sooner had I begun searching for my passport, I realized that I did not have to sell my home and made an executive decision to use Higher Order Components from now on to handle the data.

Higher-Order Components (HOC’s)

To recap, a component that takes a component and returns a component enhanced with props is called a higher-order component.

I had seen people using their components like this:

coolFunc("Foo")("Bar")

This probably looks odd, but two things are going on there. So we can break it down like this.

The return value coolFunc("Foo") is a function. So in your brain, try to imagine it like this

theFuncThatCoolFuncReturned("Bar")

It started to make sense to me. I modified my program to add one of these curried functions.

Nevertheless, even as I relaxed and gave my code a once-over, the faint dread feeling crept up from behind, telling me I could do better, that we could do better. Those higher-order components were great and all, but what about the other patterns? Maybe they could help us out here. After all, it seemed like this was a state access problem, and a solution would involve more than one component. And then I discovered render props.

I am going to go back to the first step before we added the HOC and the List component looked like this:

import "./styles.css";
const List = () => {
  const sites = [...];
  return (
    <div>
      // Iterate through sites using map 
    </div>
  );
};
export default List;

The plan was to hoist the state up, so we moved it into a HOC. Another thing we could have used is a render prop pattern. Imagine if you had a component which is the child was a function.

<Parent>
  {({name}) => {
    return <div>{name}</div>  
  }}
</Parent>

This code sandbox has the solution for putting the state in a render prop component.

🎉 Celebrate and take a sip of champagne.

We could go further using Context, but since Conext is quite different from Render Rpops and HOCs, it solves much of the same problems. So I think I will save that for another night (like tomorrow). Your homework is to look out for the HOC and Render Props pattern in Javascript.

The squirrels in my backyard sponsor this week’s post.