Use Class Components with React

Can you explain a bit why you use rest parameters in the class constructor and call to super? Is this to enable Array.protoype methods on the args and collect multiple args into a single array?

I am curious about this since I haven't seen any discussion about this technique and am not clear on its advantages and disadvantages over calling constructor and super without the ellipsis operator.

Great work on these courses!

Sure! When I don't care about the arguments (or the rest of the arguments), then I want to avoid future API changes from impacting my component (if args were to be removed or added). So I just forward them all to super without giving them a name. It's basically a way to say: "I don't care about what these args are, but I want them all to go to super"

Luckily, I don't often have a constructor thanks to public class fields :)

I just learned about using public class fields from this video. I must have skimmed past that part in the React documentation and just assumed I had to write bind(this) every time. Thanks for sharing.

Hi Kent. Great course; I especially like the very gradual explanation of React.createClass vis a vis the different levels of abstraction in Lesson 2 (or 3?). Quick question about this lesson though: you mention that by getting rid of the constructor and using the public class fields, we can get rid of the bind "...by not creating the handleClick method on the prototype and putting it on the instance." I guess what confuses me is that I thought the instance methods/properties were created from the constructor and that everything outside the constructor was on the prototype. However, we have gotten rid of the constructor. Shall I assume that all public class fields are instance methods/properties? Also, what if we had kept the constructor? Would the public class fields still be on the instance or are public class fields in lieu of a constructor? Having wrote all this out, I think I can partially answer my question by realizing I should probably research public class fields! But hey, what's done is done; anything you can do to help is much appreciated! Thanks again and love your youtube stuff as well.

Hi Patrick 👋

You can imagine that all the public class fields are actually being initialized as properties on the instance (this) in the constructor. On top of that, when your constructor looks like this:

constructor(...args) {
  super(...args)
}

That's exactly the same as the default constructor that all "constructorless" classes have. So we can remove it and rely on the default constructor. Everything else behaves the same.

So...

Shall I assume that all public class fields are instance methods/properties?

Yes

Also, what if we had kept the constructor?

Nothing would change because our constructor was the same as the default.

Would the public class fields still be on the instance or are public class fields in lieu of a constructor?

Yes, public class fields are always assigned to the instance :)

Do I have to do any config to use public class fields now ?

Excellent video! Knowing why things should be done one way or another and it's implications is fantastic!

Why does the setState function on the onClick event need to have parantheses around the bracketed count increment after the fat-arrow? is this always the case or is this a special circumstance?

Hi Rob, This is because otherwise the brackets will be interpreted as the brackets in a block:

const arrow1 = () => {
  // this is a block
}

const arrow2 = () => ({
  // this is an object
})

Hey Kent,

Great course! Really learning a bunch.

You might improve this lesson by explaining that arrow functions don't have a this context and they default to looking up one level, until they do find a this to bind to :)

Thanks!

Agree with Alex, this is great, but a lesson previous to this explaining these binds would be fantastic.

Wow, in 4 minutes you went through all permutations of 'this' bindings in React components like a hot knife through butter

Wow, in 4 minutes you went through all permutations of 'this' bindings in React components like a hot knife through butter. Well done!