Complete Intro to React v4 Class vs Function Component
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Class vs Function Component" Lesson
>> Brian Holt: Next thing I wanted to do here is I wanted to, what we're doing here, these are called function components. You'll also see them called stateless functional components sometimes. I think that's just a mouthful and a bit redundant. So I just call them function components, cuz it's a function that is a component.
[00:00:20] A lot of the times, you'll be using what are called class components. So we're gonna convert App here into what's called a class component. So I'm gonna say class App extends React.Component.
>> Brian Holt: Okay, and then I'm gonna make a function inside of that called render. And the body of render is just going to be this.
[00:00:47] So I'm going to take all this stuff that we have here, and I'm going to cut that. I'm just gonna paste that inside of our render function here,
>> Brian Holt: And then delete this App thing.
>> Brian Holt: So why do this? Well, these class components actually have a lot more flexibility in what they can do.
[00:01:23] They have more, I guess they're more powerful. Some people elect to make class components all the time. And they never use the other way of doing components, the function components like this. They'll never do it this way. They only do these ones. Other people prefer that if something doesn't need all of the extra bells and whistles, they'll just do the function components.
[00:01:45] Otherwise, they'll convert it to a class component. Cuz some people just don't like converting back and forth between class and functions based on what they need. People ask me what do I do, and I don't really know. [LAUGH] I kinda go back and forth on how I feel about it.
[00:02:01] When you have to convert between the two, it is kind of annoying. And I do like the simplicity of just, this is just something that returns something. So I do tend to use these function components sometimes if I have something that doesn't need state or any of the other life cycle methods or all the other more powerful parts of React.
[00:02:22] But in the end, what I'll say to you is that there are people that do both. One of them is not necessarily winning, so it's up to you to make a personal decision of how you feel about it. But it's worth experimenting with both and kind of getting familiar with them.