39

I understand the difference between a functional component and a class component, but what's the difference between const component to a functional component?

e.g

const Home = () => {
    return (
        <div>Home</div>
    )
}

To

function Home() {
     return (
        <div>Home</div>
    )
}

Both of them can use hooks, so what's the main difference?

darksoulsong
  • 13,988
  • 14
  • 47
  • 90
danivegas
  • 487
  • 1
  • 5
  • 12

1 Answers1

42

There is no effective difference. First is creating a function using Arrow function expressions syntax and storing it to a constant and the second is creating a plain function.

Both are functions that will perform the exact same task, return the component JSX code for rendering.

Also, there is no such term nor concept "Const Component"; there are "Functional Components" and "Class Components".

Christos Lytras
  • 36,310
  • 4
  • 80
  • 113
  • 1
    I assume I didn't have the words to define it but my intention was for a declared function that returns JSX, thanks for correction. But is there any specific reason that I'll want to assign the arrow function into a constant or it doesn't really matter? – danivegas Apr 18 '20 at 18:24
  • 2
    There is a major difference between those two implementation, and that's the `this`, `arguments` and `super` scope and implementation, it's not just syntactic sugar. I suggest you read the mozilla wiki page that I include in my answer and also read this Q/A [Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?](https://stackoverflow.com/a/34361380/1889685). **BUT** in a case of defining a component there is actually **no effective difference**. – Christos Lytras Apr 18 '20 at 18:32
  • Yes I know that, my question was referring to hooks because there is no use of 'this' and 'super'. I didn't understand the difference in hooks (with components, unlike handling events which I use a constant as a reference) because both of them can use hooks but I guess it doesn't really matter... thanks for your time :) – danivegas Apr 18 '20 at 18:54