‫Now before we really dive into class components,
‫it's a good idea to get familiar
‫with all the main differences
‫between function components and class components.
‫So, as we already know,
‫function components are the current way
‫of creating components in React,
‫as they were introduced into React in 2019
‫Class components, on the other hand,
‫have been around for a long time,
‫so since version 0.13 back in 2015.
‫Now, technically React has always had function components
‫but without hooks.
‫So before 16.8,
‫function components were very limited and not really useful,
‫because they couldn't even have their own state.
‫Now, in order to create a function component,
‫we just use any type of JavaScript function,
‫no matter if a function declaration or an arrow function.
‫With class components,
‫as the name says, we have to create an ES6 class
‫that extends the provided React.Component parent class,
‫so just like we did in the previous two lecturers.
‫So when we're using class components,
‫we're actually using object-oriented programming principles
‫like having to use the this keyword
‫to read incoming props and to define local component state,
‫which can become a bit annoying over time.
‫With function components on the other hand,
‫these things are much easier.
‫So to read props,
‫all we have to do is to use the received props object.
‫And to define local state,
‫we can use the useState hook.
‫But probably the biggest difference
‫between these two types of components
‫is how they handle side effects and the component lifecycle.
‫So in class components,
‫we actually have special methods
‫that were defined by React
‫in order to run code at different points of the lifecycle.
‫And so these are called Lifecycle methods,
‫and we will look
‫at the most important ones throughout this section.
‫Now, with function components,
‫we now care a lot more about synchronization
‫rather than the component lifecycle.
‫And we do so by using the useEffect hook.
‫I mean, we know that this synchronization with useEffect
‫still kind of translates into the component lifecycle,
‫but the focus is more on synchronizing the component
‫with a side effect.
‫And, actually, I think it's safe to say
‫that hooks in general are the big and the main difference
‫between function and class components.
‫Hooks just introduced a completely new way of thinking
‫and of writing React applications.
‫So the day that hooks were introduced,
‫React development really changed forever.
‫And if you ask me, it actually changed for a lot better.
‫But anyway, some smaller differences are in event handlers
‫and in the way in which we return the JSX
‫from our components.
‫So in function components,
‫we simply handle events with functions
‫that we define inside the component function body.
‫While in class components,
‫we have to create a new class method
‫for every single event handler.
‫Now as for the JSX,
‫in function components,
‫we return our JSX from the function,
‫while in class components,
‫we need to return JSX from a special render method,
‫which is yet another React-specific thing
‫that you need to remember
‫when you work with class components.
‫So, in general,
‫function components with hooks
‫have a lot of advantages over class components.
‫They are easier to build,
‫because they require
‫a lot less React-specific boilerplate code,
‫and they produce much cleaner code.
‫And the main reason for this cleaner code
‫is that the useEffect hook
‫combines all code related to the lifecycle
‫in one single place.
‫While in class components,
‫that code is usually spread
‫across multiple lifecycle methods,
‫which can become quite confusing in large components.
‫Now, one of the big reasons
‫why hooks were introduced in the first place
‫is that they make it much easier
‫to share stateful logic simply by creating custom hooks.
‫And, finally, in function components,
‫we can get rid of the annoying and error-prone this keyword,
‫which was especially hard to grasp for many beginners.
‫The only advantage, I would say, that class components have
‫is the fact that some people find it easier
‫to understand the component life cycle
‫because of lifecycle methods
‫with explicit names such as componentDidMount
‫or componentWillUnmount.
‫Okay, and with this pretty detailed comparison,
‫I think we're now ready to dive deep
‫into how class components work in practice.