Use Class Components with React

Share this video with your friends

Send Tweet

In this lesson we'll look at a few ways to deal with issues around this when writing class components with React. We'll eventually land at Public Class Fields syntax which is a stage 3 proposal in the ECMAScript standardization process.

peterschussheim
peterschussheim
~ 7 years ago

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!

Kent C. Dodds
Kent C. Dodds(instructor)
~ 7 years ago

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 :)

Lawrence
Lawrence
~ 7 years ago

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.

Patrick
Patrick
~ 7 years ago

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.

Kent C. Dodds
Kent C. Dodds(instructor)
~ 7 years ago

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 :)

Osama Jandali
Osama Jandali
~ 7 years ago

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

Edgard
Edgard
~ 7 years ago

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

Rob Wetherall
Rob Wetherall
~ 6 years ago

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?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 6 years ago

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
})
Alex Okros
Alex Okros
~ 6 years ago

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!

Nick
Nick
~ 5 years ago

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

Ben
Ben
~ 5 years ago

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

Ben
Ben
~ 5 years ago

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