What is the preferred syntax for a stateless react function? Why?

Question

Method 1:

const BasicProfileInfo = (props: BasicProfileInfoProps) => {
    return (
            <MainContainer>
              {....}
            </MainContainer>
    )
}

Method 2:

function BasicProfileInfo(props: BasicProfileInfoProps){
    return (
            <MainContainer>
              {....}
            </MainContainer>
    )
}

Project Environment:

babel-eslint: 8.0.2
babel-plugin-transform-class-properties: 6.24.1
babel-preset-es2015: 6.24.1
babel-preset-react-native: 4.0.0
react: 16.0.0
react-native: 0.48.4
mobx: 3.3.1
mobx-react: 4.3.3

Unless you use this in the function (which would be a strange choice to do in a stateless component), they're functionally equivalent. Use whichever one looks nicest to you. — Joe Clay

Estus Flask Estus Flask · Accepted Answer · 2018-06-22T09:52:50

Arrow function can be shortened to implied return:

const BasicProfileInfo = (props: BasicProfileInfoProps) => (
    <MainContainer>
      {....}
    </MainContainer>
);

But it has a bit more footprint in ES5 output than regular function declaration, because an arrow is transpiled to regular function any way:

var BasicProfileInfo = function BasicProfileInfo(props) { return ... }

This is the only difference between them as stateless components. Arrow functions don't have their own this and arguments, but this isn't the case.

What is the preferred syntax for a stateless react function? Why?

3 Answers