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

Keep Reading