Class Components vs. Functional Components

After researching what the differences are between class and functional components and when you would want to use each one. This is what I learned!

Functional components are commonly referred to as functional stateless components. Why is this? It’s because functional components can’t have their own state. The only way for a functional component to use state is by passing it down from a parent component through props as an argument or creating a class component. For example, If you are trying to define and maintain state in a component. Functional components don’t have a way of doing that. You would use a class component to handle state.

When using a class component, it already has access to props from the parent component without needing to pass down props explicitly as an argument. When creating a larger application with more components, passing down props through functional components could get confusing and messy. Class components eliminate the concern of losing track of what you’re passing down and where you’re passing it down from!

When do I use class components or functional components?

I didn’t really understand why you would use class components over functional components until I read more about the two. Class components are more commonly used when creating a top level component(ex. Container Component). Functional components are better suited for presentational components.

Functional components are used more often. They are easier to read and test because they don’t require all of the code that comes with using state. Class components are used less frequently, but are necessary when dealing with state and other lifecycle methods!