4

I'm aware of the benefits, of making a component stateless. What I'm not aware of is - what's the difference between making the component as a const or a function. I'm a bit confused, because I've seen several examples, using both.

function MyComponent(props) {
  return(
    <div>Hello world</div>
  )
}

vs.

const MyComponent = (props) => {
  return(
    <div>Hello world</div>
  )
}

Would be great with an explanation what to choose correctly

jonask
  • 679
  • 2
  • 6
  • 21
  • 1
    1st one is a normal JavaScript function and the second one is arrow function. Arrow functions are helpful when you want to access this context inside function as arrow functions don’t need manual binding. But when it comes to components it’s up to you to choose – Hemadri Dasari Dec 24 '18 at 10:02
  • Sooo, when to use which one? – jonask Dec 24 '18 at 10:03
  • 3
    There is no difference in this case. – JJJ Dec 24 '18 at 10:05
  • 3
    Please check this, it answers your question perfectly [https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch](https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) – Praveen Rao Chavan.G Dec 24 '18 at 10:06
  • Check this also https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26 – Praveen Rao Chavan.G Dec 24 '18 at 10:13
  • 1
    Also, it's not stateless vs stateful anymore. Functional components can be stateful (as of 16.7) and class components can be stateless. – Estus Flask Dec 24 '18 at 10:17

1 Answers1

0

In this case for a stateless component definition there's no difference, you can do it either way, there's no right or wrong... however in my opinion is becoming more standard to define the components with arrow function, it probably looks more elegant as well.

const MyComponent = (props) => {
  return(
   <div>Hello world</div>
  )
}
Michael
  • 288
  • 1
  • 7