DEV Community

Cover image for Understanding React stateless components
Viral Patel
Viral Patel

Posted on

Understanding React stateless components

Since React v14, a simpler way was introduced to define stateless functional components. These components use plain Javascript functions. With React 16.6+, you can declare "pure" functional components via React.memo

The simplest way to define a stateless component is to write a Pure Javascript function.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

Here's why React's stateless components are amazing,

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props. Consider the following function:

function sum(a, b) {
  return a + b
}

Here's an anti-pattern

function withdraw(account, amount) {
  account.total -= amount
}

No Class Needed

Plain functions are generally preferable over ES6 classes and eliminating the class-related cruft like extends and the constructor in the example above a nice win.

No this keyword

The entire component becomes easier to understand without the this keyword. All the annoying and confusing quirks with Javascript's this keyword can be avoided.

Dumping classes eliminates the need for calling bind to pass the this context around. Given how confusing Javascript's this keyword is to many developers, avoiding it is a nice win.

Enforced Best Practices

Stateless functional components are useful for dumb components. Presentational components focus on the UI rather than behavior so it's important to avoid using state in presentational components. Instead, the state should be managed by higher-level "container" components, or via state management libraries like Redux.

Stateless components don't support state or lifecycle methods. This is a good thing. Why? Because it protects from laziness. Stateless functional components programmatically enforce keeping the component pure. You're forced to put state management where it belongs: in higher-level container components.

Easy to Understand

When you see a stateless functional component, you know it's simply a function that takes props and spits out HTML. It's a pure function.

Easy to Test

Since it is a pure function, your assertions are very straightforward: Given these values for props, I expect it to return this markup.

Performance

Finally, stateless functional components offer improved performance as well. Since there are no state or lifecycle methods to worry about.

To consider downsides of using React's stateless components, visit this link

This blog was originally published on my personal blog Viral Patel

Top comments (0)