DEV Community

Cover image for React functional components: const vs. function
Carl-W
Carl-W

Posted on • Updated on

React functional components: const vs. function

I have been performance optimizing our app recently and as such, I have been getting into the nitty gritty of Javascript. One of the things I thought about is if there's any real difference between declaring a component like this:

const MyComponent = () => {
    return(
      ..
    )
}
Enter fullscreen mode Exit fullscreen mode

vs.

function MyComponent() {
    return(
      ..
    )
}
Enter fullscreen mode Exit fullscreen mode

In this form the function syntax is slightly shorter.

And then?

At times, we can write the arrow function like this:

const MyComponent = () => (...)
Enter fullscreen mode Exit fullscreen mode

If we put normal parenthesis after the arrow we don't need to write the return. So it's shorter if we can return immediately.

And then?

Another thing I have seen people talk about is the export of the component.

export default function MyComponent() {}
Enter fullscreen mode Exit fullscreen mode

vs.

const MyComponent = () => {}

export default MyComponent
Enter fullscreen mode Exit fullscreen mode

The function syntax gives us the ability to export default the component in place.

And then? (any Dude where's my car fans here?)

Hoisting

Turns out the biggest reason (as what I could find) is due to hoisting. Let's look at an example with Valid syntax:

// I like to write my components before I use them

const MyComponent = () => {}

const AlsoMyComponent = () => {}

const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
Enter fullscreen mode Exit fullscreen mode

And then? Let's look at invalid syntax:

const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom

const MyComponent = () => {}

const AlsoMyComponent = () => {}
Enter fullscreen mode Exit fullscreen mode

This example 👆 will engage your linter to throw an error. Because the components are used before they are declared.

So if you like to keep your components on the bottom, and use them before they are declared we can write them with the function syntax, and have them hoisted to the top of the file.

 const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom

function MyComponent() {}

function AlsoMyComponent() {}
Enter fullscreen mode Exit fullscreen mode

This example 👆 will not engage your linter, because when we run the file it will look like this to the JavaScript engine:

// Components are hoisted to the top.

function MyComponent() {}

function AlsoMyComponent() {}

 const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom

👀 where did they go?
Enter fullscreen mode Exit fullscreen mode

And then?

That's it! I think...? If you have a different idea then me, or know more differences please let me know!

Top comments (18)

Collapse
 
rhiannonmonks profile image
Rhiannon Monks

Thanks, this is a really helpful, succinct, well written article.

Collapse
 
ugglr profile image
Carl-W

Thank you 🎉

Collapse
 
iambilalriaz profile image
Hafiz Muhammad Bilal

What an explanation mate!
Thanks and keep sharing such amazing stuff.

Collapse
 
ugglr profile image
Carl-W

Glad I could help 🤓

Collapse
 
sargnec profile image
Necmettin Sargın

My component was not showing up const MyComponent = () => {...} bc of this and its not gives error or something I searched what I'm doing wrong and finally saw that if u use { } u have to use return otherwise (...) . Thank you

Collapse
 
doctorderek profile image
Dr. Derek Austin 🥳

That's a fantastic tip, and I've also been tripped up by that particular thing. You also sometimes need () around the JSX, though Prettier will add it for you. I wrote an article about this topic: javascript.plainenglish.io/how-to-...

Collapse
 
doctorderek profile image
Dr. Derek Austin 🥳

I prefer "const" over function, but I don't like retyping the name of the component twice.

It's a tiny bit easier to write:

export default function Component() {
  return <>Yoooo</>
}
Enter fullscreen mode Exit fullscreen mode

Than it is to write:

const Component() = (<>Yoooo</>)

export default const Component
Enter fullscreen mode Exit fullscreen mode

Thanks for the nice article! 😁

Collapse
 
johnmaxwelldistinti profile image
John Distinti

Interesting distinction, I'll keep this in mind when using const vs. function. Also, I appreciate the Dude Where's My Car joke!

Collapse
 
ugglr profile image
Carl-W

Awesome with another DWMC-fan! Thanks for reading ^_^

Collapse
 
gsmoon97 profile image
Geonsik Moon

thanks for the homemade analysis 👍

Collapse
 
segnova profile image
Joshua Segura

Thank you

Collapse
 
samx23 profile image
Sami Kalammallah

Good to know

Collapse
 
doctorderek profile image
Dr. Derek Austin 🥳

"And then? (any Dude where's my car fans here?)" Awesome! Thanks for exactly the article I needed! 🙏🦃

Collapse
 
ugglr profile image
Carl-W

Haha finally! Thank you!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.