In React world, programmers thrown around various function styles. For example:
Which one is better? Which one should you use?
Quick answer: the four are equivalent.
As stated in this discussion on Twitter, at the end of the day it doesn't matter and it is more of a personal preference.
What is important is to stick with one when building an application. This way:
- Your code will be easier to read because it use the same convention everywhere
- You will focus on building the app instead of thinking about how to write your components.
- You won't confuse the person who read the code (could be you!) by writing similar code in different ways.
My personal preference
I use named functions with destructed props to define my components:
Why this style? Let's compare with alternatives:
function vs const
When using a const, I read it as “I'm defining an anonymous function and storing it in a variable”. While with a function it's like “here is a function”.
It is longer to type but it is easier to read.
What I like about destructed props is that I know what are the accepted props as I read the component. I know this is not a strong argument, since there are other ways to do it. But this is the easier 😇
How to be consistent without thinking about it
“I want to write code. Not spend cycles on formatting.”
There are tools that help to maintain the same code convention in our code 🥰