DEV Community

React functional components: const vs. function

Carl-W on June 03, 2020

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

Read full post

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