Carl-W

Posted on Jun 3, 2020 • Updated on Jul 7, 2020

React functional components: const vs. function

#react #javascript #webdev #discuss

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(
      ..
    )
}

vs.

function MyComponent() {
    return(
      ..
    )
}

In this form the function syntax is slightly shorter.

And then?

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

const MyComponent = () => (...)

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() {}

vs.

const MyComponent = () => {}

export default MyComponent

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 />
    </>
)

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 = () => {}

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() {}

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?

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)

Rhiannon Monks • Nov 9 '22

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

Carl-W • Nov 13 '22

Thank you 🎉

Hafiz Muhammad Bilal • Nov 16 '22

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

Carl-W • Dec 15 '22

Glad I could help 🤓

Dr. Derek Austin 🥳 • Apr 12 '21

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</>
}

Than it is to write:

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

export default const Component

Thanks for the nice article! 😁

Necmettin Sargın • Mar 5 '21

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

Dr. Derek Austin 🥳 • Apr 12 '21

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