Stateless component syntax

So in this challenge, a stateless component is defined to be “a class that extends
React.Component, but does not use an internal state”.

But in this 3 minute video I found

He adjusts the class syntax to a functional syntax? I thought the form he starts with at the beginning is already a stateless component?

Yeah, that seems a little old fashioned. The full text:

A stateless functional component is any function you write which accepts props and returns JSX. A stateless component , on the other hand, is a class that extends React.Component , but does not use internal state (covered in the next challenge). Finally, a stateful component is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.

In the beginning of React (afaik), all components were classes. You could choose to use their state or not. Then along came functional components, which are just functions that return JSX. There were often called stateless functional components of SFCs. Back then, functional components could not have any kind of state - it was impossible. (This is about where the FCC materials were written.) So, at that point, if you wanted a component with state (or lifecycle methods) you used a class component, if you didn’t need those, you used an SFC. Then along came hooks and you could have state and the equivalent in functional components, so nowadays, modern React developers often don’t use any class components.

Writing curriculum for this stuff is a moving target. Really, the FCC material needs a section on hooks, but that might be a little way off. That being said, learning how to use class components is important - I don’t really write them anymore but sometimes I have to maintain code that has them. And understanding class state and lifecycle methods also helps when you move on to hooks.

He adjusts the class syntax to a functional syntax? I thought the form he starts with at the beginning is already a stateless component?

Right, but there is a difference between a class component that doesn’t use state and a functional component that doesn’t have state.

1 Like

Thank you. My understanding of stateful/stateless components was flawed. To confirm, he’s simply changed the component from a class component that uses state to a stateless functional component?

I would say that he found a class component that didn’t need to user state (or lifecycle methods) so he changed it to a functional component (because they’re a little faster).

This is about the version of React that FCC is at - components that need state of lifecycle methods should be classes, everything else should be a functional component. Use a functional component unless you need some of the class functionality. During this version of React it was common to call functional components “stateless functional components” or SFCs.

As I alluded to, the more modern thinking in React is to use functional components for everything, and use hooks to get the functionality of state and lifecycle methods. Now they’re just called “functional components”.

But again, learning this old way is still valuable. It would be like a future jet fighter pilot learning how to fly a propeller plane first - there will be other things they have to learn, but they will learn a lot of important core concepts.

1 Like