0

I've noticed recently that a lot of people are declaring functions in their functional components using the function keyword instead of using arrow functions. I'm wondering if there is a performance reason for this, or is a style thing, or something else?

For example say I have a component ShowNote with a form and a function to validate it, I could declare it like this:


const ShowNote = () => {

  function validateForm() {
    return content.length > 0;
  }
  ...

or

const ShowNote = () => {
  const validateForm = () => {
    return content.length > 0;
  }
...
rainkinz
  • 10,082
  • 5
  • 45
  • 73
  • 1
    "I'm wondering if there is a performance reason for this" even if there is some difference it wont be noticeable. So it is a matter of your code style. For example, you could omit `return` in arrow function. On the other hand you could place function declaration below the actual usage. – Yury Tarabanko May 20 '20 at 15:52
  • @BrianThompson That question is super helpful thanks. I'm shocked search let me down trying to find it. I guess ultimately it's just a style thing. I just found it weird to see as so many examples I've seen use arrow functions. – rainkinz May 20 '20 at 16:20
  • 1
    @rainkinx Yeah when you're not in a class component making sure you have the correct `this`, its not really a functional issue anymore. I guess the arrow function saves a few keystrokes so it gets preferred more often. Or like in my case, it just became habit after running into the undefined `this` problem so often in pre-hooks days – Brian Thompson May 20 '20 at 16:25

0 Answers0