3

This may be a very stupid question. But I was wondering if I should be using arrow function syntax or the classic function syntax for react components now or is this purely a style choice. I ask this purely as someone trying to work towards industry standards but have found a tremendous amount of mixed comments on it. Also is there any difference using typescript?

Example: const foo = () => {}

Or

function foo() {}

top 8 comments
sorted by: hot top controversial new old
[-] PoorChoose 6 points 1 year ago

Dan Abramov made a convincing (to me) argument for using the named function style. Stack traces will give a more immediately useful information. It’s not a deal breaker, so in a work context I would tend towards following the existing style as some people are really attached to anonymous functions

[-] sisyphean@programming.dev 5 points 1 year ago* (last edited 1 year ago)

Not a stupid question at all.

Other than the syntax, there is a very important functional difference between the two: function definitions are hoisted, consts are not. What this means in practice is that you can use a function you define later in the file if it's defined using the function f() { ... } syntax, but const f = () => { ... } functions can only be used after their definitions.

function f() { g() } // OK
function g() {}

const f = () => { g() } // Error
const g = () => {}

Personally, I like breaking up React components into smaller helper subcomponents and use them in a main component. I only export the main component, the helpers are private to the module. For better readability, I like the main component to be at the top of the file and then put the helpers in decreasing order of complexity. This style is only possible with classic function definitions, using consts forces you to use bottom-up instead of top-down order.

[-] OwlPaste@lemmy.world 1 points 1 year ago

That is a really nice explanation, thank you!

[-] lowleveldata@programming.dev 2 points 1 year ago

Arrows are cooler so

[-] MargotRobbie@lemmy.world 1 points 1 year ago

Arrow, definitely arrow, because they look cool.

[-] thepiggz@programming.dev 0 points 1 year ago

No diff with typescript, tho declared is more flexible because you can overload it. Declared (classic) functions are hoisted and can be used prior to their declaration. Not sure on perf differences

[-] Casallas@programming.dev 1 points 1 year ago

I was doing some research and it seems like arrow function preserves 'this' context. Might be a reason to either classic or arrow. The overloading seems like a valuable option too.

[-] thepiggz@programming.dev 1 points 1 year ago

Good call. Yah overloading is the way to go for complex function signatures in typescript

this post was submitted on 18 Jun 2023
3 points (100.0% liked)

React

907 readers
1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

!pico8@programming.dev

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS