Arrow versus regular functions for functional components in React

[WillowHQ]

I am wondering why you use a regular functional expression for functional (is this still the correct term?) components in react.

[kentcdodds]

Hi @WillowHQ!

I decided to answer this question via audio: https://www.briefs.fm/3-minutes-with-kent/64

Good luck!

[tamouse]

These don't really work if audio doesn't work for one.

[kentcdodds]

Sorry, what doesn't work about it?

[tamouse]

When one is hard of hearing / deaf, nothing works about it.

[kentcdodds]

Sorry @tamouse,
It's definitely less accessible (and for the hard of hearing/deaf it's entirely inaccessible). I'm really doing my best to freely give of my time to help answer people's questions and often it's easier to respond to people via my 3 minute podcast. It's not that I'm intentionally trying to be exclusionary. It's just that sometimes if I want to spend time with my family and answer people's questions, I have to do things the easier way. :-(

[WillowHQ]

I actually sumarized all of Kent’s points onto a few twitter posts. I’m just back from a weekend away from internet. I’ll put this onto a comment on the 3 minute thing tomorrow night.

…

On May 21, 2018, 5:29 PM -0400, Kent C. Dodds ***@***.***>, wrote: Sorry @tamouse, It's definitely less accessible (and for the hard of hearing/deaf it's entirely inaccessible). I'm really doing my best to freely give of my time to help answer people's questions and often it's easier to respond to people via my 3 minute podcast. It's not that I'm intentionally trying to be exclusionary. It's just that sometimes if I want to spend time with my family and answer people's questions, I have to do things the easier way. :-( — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[kentcdodds]

Thank you @WillowHQ

[joeycozza]

Side note: I left off the intro in the audio answer that introduces the question.

Audio Transcription:

Functional components is what the react docs call them. I really don't like the term, maybe I should pull request to the react docs. But functional components kind of conflates functional programming which... function components should probably emulate some of those principles like pure functions and stuff but it doesn't really, so yeah. I never use the term functional components, I think that's silly. I use "function components" a component that is a function. There are also "class components", components that are a class. So anyway, that aside, I do use and what I'm doing is not a function expression, I'm using a function declaration. So a function expression would be like const x = function x(){//whatever} and so that would be a function expression. Or like in a callback, that's a function expression if you inline a function in there. A function declaration would be like on a newline function x(){//whatever} that's a function declaration. The reason I do that is because it doesn't matter what order that appears in the module or the closure. It will be hoisted to the top of the closure and available anywhere. I like that feature. I have a blogpost called, "Newspaper Code Structure" I think, where I kind of leverage that with the way I structure my modules. I don't really do that as much anymore. I used to put all my exports up at the top of the file, or my return statement at the top and then function declarations below the return statement or below the export. But I've decide just to move everything like returns and exports down to the bottom of the closure. So anyway, I do still prefer functions most of the time. I'm starting to warm up to arrow functions cause then you don't have to have the return statement. But the nice thing about functions, like a function declaration, is that because you already have the body and the return statement, you can put console.logs in there easier you can refactor things a little easier. Anyways, it's not a huge deal to me, I don't really care what you do. But that is kind of why I do function declarations instead of arrow functions. Good luck!

[kentcdodds]

Thanks @joeycozza!!