Class Components

[00:00:00]
>> So head back over we just did, Here, Uncontrolled forms. We are now down here to ten uncontrolled forms and we're gonna do class components, yeah, we're gonna do class components. So if you go into our Adopt Me and you click on one of these pets, It'd be nice if there was some way to visualize all the photos for all the individual pets, right?

[00:00:34]
So we're gonna do that really quick and I'm gonna show you the older way of doing components which are called class components. I used to teach a lot more class components and as time has gone by, I teach class components less than less and now it's kind of a footnote.

[00:00:50]
It used to be very front and center. If you go teach or if you go take the first version of my class, it's all class components because functional components didn't exist yet. So please create a file called Carousel.jsx. Carousel is one of those words that if I look at it too long, it somaticizes, and I can no longer spell it.

[00:01:13]
Because it's like that doesn't look like a word anymore, right? So import Component, capital C component from react. We're gonna make a thing called class carousel from, sorry, extends component. Okay, this is gonna have a state Of the active photo that's on the page. If I have ten photos by default, the first one will be the active one, the hero one, if you will.

[00:01:51]
Will give us some default props. So if you don't give it anything, Images, http://pets-images.dev-apis.com, /pets/none.jpg Okay, and then we're gonna give it a render function here. A render function is basically like the function body of the components we've been writing so far. Huge key here, no hooks, class components and hooks do not mix.

[00:02:42]
You either have hooks or you have class components inevitable. So const (active) = this.state. Const ( images) = this.props. So, whereas before I had use state to get state, you're gonna keep it on this, which is mutable state and the class component. And this.props as you might imagine is what is passed in from the parent component.

[00:03:21]
Okay, and then here, we're going to return our markup. Div className='carousel'. Img src=(images(active). Alt = animal hero. Whatever you wanna call that. div className =, carousel-smaller cuz I was good at CSS classes. Then we're gonna do an images.map, photo, index. And this is gonna return an image. Key = photo cuz those will always be unique.

[00:04:29]
src= photo. Name=, So, if the index is triple equal to the one that is active, then it has an active class, otherwise, it has no class, just like meme has no class. Okay, alt= animal thumbnail. Okay? Then down at the bottom make sure you export default carousel. Let's get this rendering first and then I'll come back and explain everything that just happened here.

[00:05:18]
So go to the details page, please. I want you to import carousel from carousel and, First component inside div.details. So this one right here, we're gonna say carousel with images= pet.images. So this is what we made. We had the hero image here, right? And then these are the little thumbnails here.

[00:05:55]
You can see that this first one Is a little grayed out because it's the active image, right? The rest of these don't have that. And in a second, we'll make it so you can click on the other ones and you can rotate with the hero images but we're not there yet.

[00:06:08]
Let's hop back over to Carousel and have a chat about class components. The one absolute must, I guess there's probably two absolute must. It's gotta be extend or react.component, which is what this does. The second thing is every class component has a render function. Unexceptionally must know two ways about it.

[00:06:28]
It must have a render function. You don't have to return markup or anything like that, but you do have to have it. I guess you have to return something either, but it can return null if you really wanted it to. Wouldn't make any sense, but it's possible. Okay, it has this.props which if you look at details, this.props is how we get images, right?

[00:06:53]
Whereas with the render functions we got it from being passed in as a props, it's like the parameters. Here in a class component and carousel.jsx it comes from this.props. So in other words, context in the sense of like this, this becomes very important in class components. I used to have to go very in the depth when I'm teaching react of what react context is and what JavaScript context and things like that is.

[00:07:20]
I don't necessarily have to do that anymore. This.props, just like props that come in from a function is immutable. I cannot say this.props.images equals blah doesn't work. If you wanna have default props, you have to understand what static default props is. This is like, hey, if you don't pass anything into the carousel, which let's just see what that looks like.

[00:07:44]
If I delete this, then I get this adopt me placeholder image, right, which came from this, right? That's what the default prompts are for. What's nice about that is now I can just assume that I always have images, whether or not the user provides it to me. Okay, so that's great.

[00:08:11]
There's no hooks, so how do we keep track of state. State, I guess I kind of gave myself away there, right? You keep track of it with state. So state is mutable, right? So I can change state using a function called this.set state. We'll see set state here in just a second cuz we're gonna add some interactivity but just know that state is how you keep track of like internal state to a component.

[00:08:35]
Basically, the same thing that you would use use state for. That's what state is for here. And something I haven't shown you yet, but there are things called life cycle methods. So a lifecycle method is we used use effects to make a request by saying something like use effect, right?

[00:08:57]
And we gave it an empty array which said only run this once at the beginning. If you want something like that for a class component you would say, componentDidMount. This function will get run once at the beginning of every time that it mounts onto the DOM and then never gets run again.

[00:09:20]
If you wanna run it every time something updates, there's componentDidUpdate, right? This will get run every single time that's state gets updated. If you wanna run something after the component has unmounted, you can say componentDid, Willunmount. There it is. There should component update, componentDidCatch. We'll do that one here in just a second.

[00:09:48]
There's a bunch of lifecycle methods here. So use effect basically combined all those lifecycle methods down into this use effect method. With class components, it's broken out into various different functions that describe the lifecycle of a component. I actually really like this. I miss writing react this way, but no one writes it like this anymore.

[00:10:15]
It is occasionally useful. They said it's not deprecated. You can use this forever. It's why I wanted to show you how to write code like this. Some people still like it, like you can write code like this, but I would say generally the react world has moved to using hooks most of time.

[00:10:30]
>> How common is it to see a project where some components are class-based and some are using hooks?
>> Very common, it certainly depends on how old the project is. If the project is six or seven years old, extremely common because back then there was no way to write that.

[00:10:48]
I would say these days if you're doing a greenfield project, I would say most people just always write function components. There's a couple things that still function components can't do, like we'll do errors, which you can't do any other way. But otherwise, certainly, you'll see some here and there.

[00:11:09]
For me, if you're working with me, I'm fine with you using both of these whenever you've wanna curse students like this is going to handle this much better than the other one. I don't know maybe you have something where you have a really complicated component, didmount and putting that all in effect, doesn't make sense to you.

[00:11:27]
Makes a ton of sense to me. I'm very into that you think that's a good idea. I think there are probably other companies where they would tell you just, well, just use an effect. Let's taste at that point. Do you have a question, Dustin?
>> Yeah, I think you'd just kinda answered it, but it was, when should you use a class component over a functional component?

[00:11:48]
>> Taste at this point. There's no distinct advantage here. There's some super fine tuning you can do with performance with a class component that is maybe more difficult to accomplish. Cuz there's a thing called componentshouldupdate, shouldcomponentupdate, this function here. Where you can get really fine grain of like rerender, don't rerender, right?

[00:12:18]
And if that's important to you when I'm kind of curious what you're doing cuz that would be very specialized, but plausible. There's no way to as well fine-tune this in a class component, sorry, in a function component. So that's one to keep in mind.