What is a stateless component in React?

By Bernie FitzGerald •  Updated: 03/12/22 •  1 min read

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.

Bernie FitzGerald