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

81–90 of 142 posts

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

#81

Post by danabramov »

kbumsik wrote: post #73

> I didn’t know this for years. Please don’t turn this into an interview question. In fact, this post is more about JavaScript than it is about React. Well, I think how prototype works is much more important than using React. I think having an interview in JS without knowing prototype is like having an Java interview without knowing polymorphism, abstract class, interface or something.

I don't disagree with this — I was referring to the how does React do it part specifically.

Although I'd also note that in practice people tend to use a subset of JS in their work, and often prototypes aren't directly used. (I understand they power everything under the hood but I'm talking about something product engineer has to think about.)

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

#82

Post by tcgv »

TLDR Version: React defines the property "isReactComponent" in its "Component" class prototype object. When you extend "Component" React can simply check "MyClass.prototype.isReactComponent" and if the result is true, it knows it's a class and not a function!

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

#83

Post by wongarsu »

quietbritishjim wrote: post #66
IMTDb wrote: post #64

Earlier quoted context omitted.

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 m…

>I would be interested in the motivation for that

The article you link to actually explains that quite well. Basically there are three motivations for hooks:

1. Keep code that belongs to one functionality in one place. For example setup and teardown would be in the same hook, but when writing a class they are scattered among the many things happening in the event methods in the class

2. Allow new ways to compose functionality. You can use the same hook in different functions. You could achieve the same effect before, but this makes it more convinient

3. Produce code that works better with Prepack [1], to make ahead-of-time compiled react runtimes more efficient. It might be some time until this becomes a rolled out advertised feature, but hooks are a good step on the way there

1: https://prepack.io/

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

#84

Post by hoppelhase »

masklinn wrote: post #80
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…

> What's the rationale for allowing the components to be defined as functions in the first place? Intent: it makes clear that the component is stateless in a way a class-based component does not.

This is why I don't like the hooks concept introduced in the post. It breaks these semantics.

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

#85

Post by pault »

quietbritishjim wrote: post #66
IMTDb wrote: post #64

Earlier quoted context omitted.

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 m…

The problem is class based components have to be written very carefully to remain testable, and the average developer is not that careful. It's basically a foot cannon, and the worst react spaghetti I've seen has always been a result of huge classes that manage way too much state. I believe that making it a convention for developers to break up their components into small, pure functions will raise the quality of most react applications. Recompose has made this possible for a while, but most react devs aren't familiar with it, and baking it into the framework should make that approach less exotic. Of course, you will still be able to write huge functions that manage too much state, but I think classes encourage this more than functions.

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

#86

Post by k__ »

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.

Sadly (or luckily?) with hooks they aren't stateless anymore.

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

#87

Post by k__ »

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…

React started with class components, because of state, I guess.

Later they added function components because they are more concise and tell readers that this component is a simple mapping from props to virtual DOM elements.

With hooks, a recent addition to React, they seem to move away from class components. Hooks enable you to use state and do things when a component is mounted in the DOM or removed from it inside of function components.

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

#88

Post by k__ »

kbumsik wrote: post #73

> I didn’t know this for years. Please don’t turn this into an interview question. In fact, this post is more about JavaScript than it is about React. Well, I think how prototype works is much more important than using React. I think having an interview in JS without knowing prototype is like having an Java interview without knowing polymorphism, abstract class, interface or something.

I don't know.

Prototypes are more powerful than anything Java has to offer.

It's a low-level concept that is mostly used to create a class system on top of it, rather than used directly.

Polymorphism, abstract classes or interfaces are part of the day-to-day stuff a Java dev has to meddle with.

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

#89

Post by baseballMan »

cryptonector wrote: post #11
xrd wrote: post #7

I've read at least two dozen explanations of prototypes that didn't offer 10% of the clarity of this post. And another brilliantly told story of how React does its work. Bravo.

I agree, this is the best explanation of JavScript's new/this/prototype/__proto__ I've seen yet. It was definitely worth the read.

Totally! I'm not even a full time JS dev (I just have played around with React before) and I understood all of it.

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

#90

Post by arcosdev »

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…

Because in JavaScript classes are lies.
Post reply on HN