Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How Does React Tell a Class from a Function?

overreacted.io

Post reply on HN
Print view View original

61–70 of 142 posts

Re: How Does React Tell a Class from a Function?

#61

Post by cozos »

arry wrote: post #60

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goe…

Functions are stateless and I believe can be better optimized. Enforcing statelessness is also a win in itself.

Re: How Does React Tell a Class from a Function?

#62

Post by jrumbut »

ricardobeat wrote: post #51
sophiebits wrote: post #44

Earlier quoted context omitted.

This post does try to explain it in plain English. See the explanation starting at the bolded sentence that starts "Confusingly,".

Honestly I don’t think it does a good job at explaining it. Classes are mostly syntax sugar for “old” constructors and prototypes, not the other way around (that’s the whole reason you can’t tell them apart). Would be easier to explain it that way; on mobile right now so can’t comment too much.

I thought it was unfortunate that prototypes were characterized as an inadequate approximation of classes, when in fact prototypes are a wholly legitimate, powerful, and certainly interesting way to approach object-oriented programming (https://en.m.wikipedia.org/wiki/Prototype-based_programming).

20+ years of confused programmers suggests that maybe it wasn't the right way to go for a language that is frequently used by beginners, but still that wasn't the fault of prototype based programming itself.

The new class system is syntactic sugar leveraging the power of prototypes. This was always possible, and nothing stopped you from implementing a class-like system in JavaScript a long time ago.

More, very readable, info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guid...

Re: How Does React Tell a Class from a Function?

#63

Post by RoryH »

cozos wrote: post #61
arry wrote: post #60

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goe…

Functions are stateless and I believe can be better optimized. Enforcing statelessness is also a win in itself.

Indeed, also checkout the React.PureComponent for another example of an in-between Class and Function optimisation.

Re: How Does React Tell a Class from a Function?

#64

Post by IMTDb »

arry wrote: post #60

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goe…

To me it's all about intent. By using a function instead of a class, you are basically saying "future reader, this component is nothing more than a simple mapping from those values to that DOM tree, don't try to look for internal states or any complex treatment here".

Sure you could write a "normal React component without state" and do the same, but having those properties baked in the way you defined the component is much stronger.

Re: How Does React Tell a Class from a Function?

#65

Post by dabbijo »

arry wrote: post #60

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goe…

The future of React is less classes and more functions.

See hooks

https://reactjs.org/docs/hooks-intro.html

Re: How Does React Tell a Class from a Function?

#66

Post by quietbritishjim »

IMTDb wrote: post #64
arry wrote: post #60

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goe…

To me it's all about intent. By using a function instead of a class, you are basically saying "future reader, this component is nothing more than a simple mapping from those values to that DOM tree, don't try to look for internal states or any complex treatment here". Sure you could write a "normal React component without state" and do the same, but having those properties baked in the way you defined the component i…

I absolutely agree with you.

This makes me very skeptical about the proposed feature in React, called "hooks", which is linked to in the article. It lets you add state to your functional components, and it looks like you end up bundling all your code into one function rather than having a separate constructor to initialise the state (to me, separating out that function is a good thing). I would be interested in the motivation for that.

Link: https://reactjs.org/docs/hooks-intro.html

Re: How Does React Tell a Class from a Function?

#67

Post by quietbritishjim »

RoryH wrote: post #63
cozos wrote: post #61

Earlier quoted context omitted.

Functions are stateless and I believe can be better optimized. Enforcing statelessness is also a win in itself.

Indeed, also checkout the React.PureComponent for another example of an in-between Class and Function optimisation.

Surprisingly, pure functional components are called even when their props haven't changed so PureComponent is not "in between" but "even more" than functional components. As for regular components, you can override this behaviour by adding a componentWillReceiveProps() method (yes, you can add a method to your functional component!).

Re: How Does React Tell a Class from a Function?

#70

Post by peterjmag »

cozos wrote: post #61
arry wrote: post #60

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goe…

Functions are stateless and I believe can be better optimized. Enforcing statelessness is also a win in itself.

I like function components too, but I've seen some interesting arguments against using them:

https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-f...

And I wish I had a reference for this, but I seem to remember reading that any future performance optimizations that could be applied to function components could probably also be applied to class components (at least ones that contain only a render() function and nothing else).

In any case, I'm hoping that React eventually gets to a point where developers don't have to make a choice between class and function components, and the compiler or the runtime makes that decision for us on a per-component basis.

EDIT: As an example, here's a Babel plugin that takes care of the conversion for you at compile time: https://github.com/remcohaszing/babel-plugin-transform-react.... Not sure what its heuristics are for determining what should and shouldn't be converted though, if any.

Post reply on HN