Function vs Class Components in React

If you know anything about react you almost certainly know that its built around components and you likely know there are two ways to build those components — one, a function, and two, a class. But whats the differences and why should we use one vs the other?

Well to start off I want to say that if you learned react awhile ago you probably learned class components while functional components are a bit new to you. However, the developers of react have made a small push towards functional components and there’s good reasons for that. Lets look at why functional components are a bit better for most things, and then we will talk about some of the benefits that class components still hold.

First lets talk about the pure aesthetic of your code. Functions tend to be much shorter and “cleaner” than their class counterparts and that makes them easier to read, follow.

There are also small performance benefits to functional components since no class has to be created and saved in memory. The react dev team has also put more focus on improving functional components than class components recently.

So why ever use class components? Now that functional components have hooks and can use life-cycle methods and state what is the use for class components. Really the difference between the component type is negligible and purely preference. In my opinion complicated components should be made into classes because its a bit easier to understand what is happening with state and life-cycle methods in a class component. But again, that is strictly preference and it really comes down to what you prefer.

In my opinion functional components should be used 80% of the time because it makes your code shorter and more readable, saving the class components for larger components with more moving parts.