DEV Community

Discussion on: Creating React Components - different syntaxes

Collapse
 
dance2die profile image
Sung M. Kim • Edited

I went from

5 - classic component syntax

1 - Function declaration

3 - Arrow function statement

4 - default export function

then back to 3 - Arrow function statement.

(I've never used 2 - Anonymous function statement).

The reason being that I learned React with Class components, and then hated this so moved toward using functions (especially w/ introduction of hooks).

I then moved onto default export, which I found it easy to declare w/o having to worry about how to name the component.

But then, I have a mouse-jerk problem, so sometimes move files around by mistake. With default export, I have to "read" what the component did, to be able to move it back to where it was.

When you name a function, and export it that way, you know what the component is w/o a second thought.

So my preference nowadays is the 4th one.

Collapse
 
chaituknag profile image
Naga Chaitanya Konada

Very good.

I think one more reason why export default function approach might not be preferred is when you write propTypes and defaultProps. Because these require the name of the function to assign those types.

Collapse
 
dance2die profile image
Sung M. Kim

That's actually a good reason.