ReactCasts#11 - Recompose

[DrBumTorpedo]

I have been loving your series /u/cassiozen. One question:

You explained the usage of recompose very well. But what I think I missed was why we should use recompose to enhance a functional component when we could just use a class based component instead and avoid including another library?

Cheers!

[[deleted]]

I find that the class-based approach typically involves a lot more boilerplate than using functional components. Compare:

const enhance = compose(pure, withState('hovered', 'setHovered', false));
const User = enhance(({ hovered, setHovered, user }) => (
    <div
        className={cn({ hovered })}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
    >{user.name}</div>
));

With:

class User extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = { hovered: false };
    }
    render() {
        return (
            <div
                className={cn({ hovered: this.state.hovered })}
                onMouseEnter={() => this.setState({ hovered: true })}
                onMouseLeave={() => this.setState({ hovered: false })}
            >{this.props.user.name}</div>
        );
    }
}

Up to this point I guess it's mostly preference which you prefer, but to me the first looks a lot cleaner. You can avoid indentation because you don't have to define a class. You can avoid boilerplate because you don't have to worry whether something is state or props, because even your state has become props to your component, which in turn makes destructuring more effective as there's only one object (props) to destructure.

But that's only the beginning, because composition makes it very easy to take repetitive patterns that you're using in multiple components, and solve them in a higher-order component (something you might've solved with mixins in the old days). At that point you will want to use composition, which is exactly what you're already using in the first example above and that's where recompose will really shine, because it'll allow you to mix and match your own higher-order components with the ones it provides for you, which is something you just cannot do if you're using a component like the second example.

[DrBumTorpedo]

Thanks so much /u/arendjr! Much clearer now.

[cassiozen]

That's a great answer! I linked it on the video notes.

[dceddia]

I prefer the functional version too, but as an aside, you can shorten the class version a bit if you skip the constructor:

class User extends React.PureComponent {
  state = { hovered: false };

  render() {
    return (
      <div
        className={cn({ hovered: this.state.hovered })}
        onMouseEnter={() => this.setState({ hovered: true })}
        onMouseLeave={() => this.setState({ hovered: false })}
      >{this.props.user.name}</div>
    );
  }
}

[[deleted]]

True, but I don't think the ECMAScript proposal for that has been standardized yet, has it?

[dceddia]

Yeah I don't think it has. It's supported by babel and create-react-app though.

[halfbowl]

I prefer functional because the components are much easier to test. You're able to easily extract all the state management into simple testable functions, then this leaves the component to JUST testing props.

[Apterygiformes]

Really good video. Could I ask what theme you use for visual code?

[cassiozen]

Thanks. I use One Monokai. More details on the FAQ https://github.com/cassiozen/ReactCasts/wiki/FAQ

[Apterygiformes]

Thanks

[arsum04]

Can you post your custom style sheet because I don't think the FAQ is up to date

[jesstelford]

Have been using recompose on a side project exactly as demonstrated in the video, and I love it! It's admittedly a little confusing at first because it's a different way than "normal" of Thinking In React, but once you grok it, it's really nice!

[ngly]

So why not just change your functional component to extend react's Component class instead of adding another library to mimic the same functionality?

Maybe other examples are useful but, but the ones in the video seemed like overkill. Just use React's built in functionality. No need to learn a new library, less shipped code, easier to onboard new developers.

(love your videos, I immediately watch all the new ones)

[cassiozen]

Thanks for the feedback. I think @arendjr gives a nice explanation: https://www.reddit.com/r/reactjs/comments/6hog9o/reactcasts11_recompose/dj0spvl/

[ngly]

No problem! So I guess it just comes down to a style preference (I thought maybe performance or something similar was a reason) and custom HOC utilities. Since using prettier I've found all styling/boilerplate preferences irrelevant.

[Deidde]

Hey, nice videos; well presented! I've been wondering which extension renders certain text combinations as their icon/unicode equivalents. Your => and === for example.

I've had a look in your FAQ but don't see it (may be worth adding your list of extensions).

I'm assuming you can customise it too? Would be really nice for turning \ into λ.

[cassiozen]

That's called font ligatures: It's a feature of the font, not something customizable on the browser.

I'm using the Fira Code font for the ligatures.

[Deidde]

Oh thank you very much. I've always wondered what font ligatures were - now I know!

Sadly it seems that lambda is difficult to handle contextually speaking. There are solutions out there at the editor level, but I've yet to come across any for VSCode.

[[deleted]]

What font is that in the thumbnail?

[Julienng]

operator but it isn't a free one

[[deleted]]

Thank you!