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)
Thanks, this is a really helpful, succinct, well written article.
Thank you 🎉
What an explanation mate!
Thanks and keep sharing such amazing stuff.
Glad I could help 🤓
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
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-...
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:
Than it is to write:
Thanks for the nice article! 😁
Interesting distinction, I'll keep this in mind when using const vs. function. Also, I appreciate the Dude Where's My Car joke!
Awesome with another DWMC-fan! Thanks for reading ^_^
thanks for the homemade analysis 👍
Thank you
Good to know
"And then? (any Dude where's my car fans here?)" Awesome! Thanks for exactly the article I needed! 🙏🦃
Haha finally! Thank you!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.