CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
danivegas
danivegas

Reputation: 547

React Hooks Const Component vs Functional Component

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?

Upvotes: 45

Views: 27527

Answers (2)

Jussi Hirvi
Jussi Hirvi

Reputation: 725

One (the biggest?) practical difference is that JavaScript functions are hoisted but constants, for practical purposes, are not. Thus it is possible to use a function before it is declared:

const App = () => (
  <>
    <MyComponent />
  </>
)
function MyComponent() {}

But if you replace the MyComponent declaration with

const MyComponent = () => {}

The code will not work, until you move the component declaration up so the component is declared and initialized before it is used.

I liked this explanation. It's practical and to-the-point.

Upvotes: 1

Christos Lytras
Christos Lytras

Reputation: 37318

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".

Upvotes: 48

Related Questions