-2

I have a question regarding the way to use the react hooks in react.

I have notice that some use in their files

const Users = () => {
  ....
 }
export default Users;

While others uses this instead

export default function Users(){
  ...
 }

What is the recommended/best way to do it?

Joseph
  • 7,042
  • 23
  • 83
  • 181
  • 4
    this is not about react hooks – Ali Faris Jul 11 '20 at 15:51
  • also, this code does the same thing – Ali Faris Jul 11 '20 at 15:52
  • There's no difference. Both code examples export `Users` function as default export. – Yousaf Jul 11 '20 at 15:53
  • This is unrelated to React. Your're asking about the difference between a function and an arrow function. – JMadelaine Jul 11 '20 at 15:54
  • 1
    @Yousaf There is a difference. For one thing, arrow functions do not have a `this` context while normal functions do. These are two different tools that, depending on use case, can be used interchangeably. – JMadelaine Jul 11 '20 at 15:56
  • @JMadelaine as far as i can tell, question is about writing `export` statement on the same line where function is declared and writing `export` statement at the end of the module, not about arrow and regular functions – Yousaf Jul 11 '20 at 15:57
  • You're right, I'm just being a smart ass. – JMadelaine Jul 11 '20 at 21:08

2 Answers2

0

Actually both are standard ways. You can use any of them and no performance issues are there. however there some advantages of using the code like bellow:

const Users = () => {}
export default Users;

  • This is called arrow function and this is a ES6 feature.

  • Arrow syntax automatically binds this to the surrounding code’s context

  • The syntax allows an implicit return when there is no body block, resulting in shorter and simpler code in some cases

  • Last but not least, => is shorter and simpler than function, although stylistic issues are often subjective

So for the best practice and usability, you should go for the Arrow Function

For better understanding you can check This

Arnab
  • 936
  • 7
  • 13
0

This is more related to JavaScript (although the context is React function components).

const Users = () => {
  //....
 }
export default Users;

function Users() {
  //...
}
export default Users;

export default function Users(){
  //...
}

// Usage with auto-complete
import Users from './Users.js';

The export effect is the same, although there is a difference between functions and arrow functions.

But using export like so we do have a more significant difference:

// Bad practice, don't do it!
// No auto-complete, no function name while debugging
export default () => {
  // Users logic
  //...
}

// No auto complete on typing Users, need to name the default export
import MyUsers from './Users.js';
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Which of these do you frequently use? – Joseph Jul 11 '20 at 17:12
  • The first one, `const Users = ...` and `export default Users`, but I believe that default exports are bad practice so I try only to use named exports. https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export – Dennis Vash Jul 11 '20 at 17:13
  • Whatdo you mean? You're using named export here `export default users` – Joseph Jul 11 '20 at 17:16
  • This is an answer, it doesn't mean that I use it. As I said I trying to only use named export `export const Users = ....`, but it's my opinion... Doesn't mean it the right thing to do. – Dennis Vash Jul 11 '20 at 17:17
  • how about `const Users`, `export default Users` VS `export default function Users`. I prefer the last cause you only use it in one line? Why would use the first one like what you usually use? – Joseph Jul 11 '20 at 17:27
  • It doesn't matter. The differences are between function and arrow function. – Dennis Vash Jul 11 '20 at 17:28