Stateless components in React are components that don’t manage state. For example, a stateless component might just render the same thing each time it is rendered, like a logo or text block, or it might just render something based on data that it is receiving from a parent component.
The first example shows a stateless functional component that always renders the same output:
function Stateless() {
return (
<div>
<h1>I will never change!!!!</h1>
</div>
)
}The next example shows a component that receives props but is still stateless:
function StillStateless(props) {
return (
<div>
<h1>I change, but only in displaying this text: {props.title}</h1>
</div>
)
}
function App() {
return (
<div>
<StillStateless title="My Stateless Component" />
</div>
)
}As you can see from the above examples, if we’re not handling state in our component (this.setState in classes or useState in functions) then your component is stateless.
