New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arrow versus regular functions for functional components in React #397

Closed
WillowHQ opened this Issue May 12, 2018 · 9 comments

Comments

Projects
None yet
5 participants
@WillowHQ

WillowHQ commented May 12, 2018

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

@kentcdodds

This comment has been minimized.

Owner

kentcdodds commented May 14, 2018

Hi @WillowHQ!

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

Good luck!

@kentcdodds kentcdodds closed this May 14, 2018

@tamouse

This comment has been minimized.

tamouse commented May 19, 2018

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

@kentcdodds

This comment has been minimized.

Owner

kentcdodds commented May 21, 2018

Sorry, what doesn't work about it?

@tamouse

This comment has been minimized.

tamouse commented May 21, 2018

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

@kentcdodds

This comment has been minimized.

Owner

kentcdodds commented May 21, 2018

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

This comment has been minimized.

WillowHQ commented May 21, 2018

@kentcdodds

This comment has been minimized.

Owner

kentcdodds commented May 21, 2018

Thank you @WillowHQ

@joeycozza

This comment has been minimized.

Collaborator

joeycozza commented Dec 10, 2018

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

This comment has been minimized.

Owner

kentcdodds commented Dec 10, 2018

Thanks @joeycozza!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment