0

The majority of examples are using function keyword when showing how to create higher order components.

The example below from React documentation:

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

At the place where I work, we use TypeScript and we have TS-lint rule to not to use function keyword.

So JS version of the Higher Order Component will look like something like this:

export const collapse = (options) =>
(Trigger)  =>
   class C extends React.Component {
   } 

The question is: is there any difference, are there any benefits for using syntax with function keyword?

TheFullResolution
  • 1,251
  • 1
  • 15
  • 26

1 Answers1

1

In your case there will be no difference - they will behave identically.

But there are cases when it is not so - there is a nice discussion on this topic.

Amid
  • 21,508
  • 5
  • 57
  • 54