Class-based components

These components are JavaScript classes that extend React.Component. These classes consist of multiple methods which are called life cycle methods. For instance, render method is used to render JSX code. Further reading

A class-based component with a simple state

Functional components

These components are simple JavaScript functions that take props as an argument and return JSX code. Props are data which are passed from parent component to a child component as an input.

A simple functional component written with arrow functions syntax

As I said earlier, react v16.8 introduced hooks. Hooks are functions that let you use some react features and should only be used inside a functional component. One common feature is state management which we can achieve by using useState hook. Further reading

A simple use of state in functional components with hooks

Hooks add more flexibility to functional components and there is no feature that you cannot achieve by using functional components.

Let’s take a look at some differences

Choosing between functional and class-based components is completely up to developers. All class-based features are covered by built-in react hooks. According to react team at Facebook, there is no plan to remove class-based components in the next versions. Even Facebook is still using class-based components and have no plan for refactoring.

It’s good to know that there is no difference in performance. Some say that functional components have better performance, because react only needs to call a function and pass the props to render a functional component. On the other hand class-based components are instances from React.Component and have a constructor and some life cycle methods. I don’t think if it makes any big difference. You could find some tests on the internet indicating that there is not much difference in performance. The difference is when you want to optimize your performance. For example you would want to avoid components from rendering too much and you should use pure components in class-based approach and memo in functional approach.

I think the important difference is the syntax. I’d rather go with functional approach here. The syntax is cleaner and more readable with functional components and you can write the same component with less lines of code. In addition, hooks are very flexible. For example you don’t necessarily need to define your state as an object. With useState, states can be any JavaScript primitive. You can implement all life cycle methods with useEffect hook and this leads to a more readable code. You can also define your own custom hooks and use already built-in hooks in it.

You might have already heard that class-based components have some confusing concepts as “this” and “bind”. In React Conf 18, Sophie Alpert said that class-based components are hard for both humans and machines. In a compiled file of a class-based component, some method names are still unminified or many unused methods don’t get stripped out. This is because it’s hard to tell how methods in a class can fit together at the compile time. Also class-based components make some patterns that are hard for compiler to optimize. Sophie also stated that class-based components make it hard for implementing hot reloading reliably.

I need to point out that we should learn the concepts of class-based components. Even if you don’t want to use them, you need a good understanding of react life cycles to use them in functional components as well. You may also end up working on an old project with class-based components. So choosing between these approaches is up to you. But try to give a shot to both of them.